CSS预处理器：Sass与Less的语法和特性（含实际案例）

Sass（SCSS语法示例）

1. 变量：统一管理颜色

// 定义变量
$primary-color: #1a237e;
$success-color: #4caf50;
$font-size-base: 16px;// 实际应用
body {color: $primary-color;font-size: $font-size-base;
}.button {background: $success-color;&:hover {background: darken($success-color, 10%); // 内置函数动态调整颜色}
}

案例效果：统一项目主色和字号，轻松修改主题色，避免重复硬编码。

2. 嵌套：简化层级结构

// 嵌套示例
nav {ul {list-style: none;li {a {color: #fff;text-decoration: none;&:hover {background: rgba($primary-color, 0.2);}}}}
}

案例效果：减少选择器嵌套层级，代码更直观，适合复杂组件样式。

3. 混合宏（Mixin）：复用样式块

// 定义按钮样式混合宏
@mixin button-style($bg-color, $padding: 10px) {background: $bg-color;padding: $padding;border-radius: 5px;transition: background 0.3s;
}// 实际应用
.primary-btn {@include button-style($primary-color);
}.success-btn {@include button-style($success-color, 15px);
}

案例效果：通过参数化混合宏快速生成不同风格的按钮，减少重复代码。

4. 继承（@extend）：复用基础样式

// 基础样式
.base-card {border: 1px solid #ccc;padding: 20px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}// 继承并扩展
.featured-card {@extend.base-card;border-color: $primary-color;box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

案例效果：复用卡片基础样式，通过继承减少冗余，仅覆盖差异部分。

5. 逻辑控制：动态生成响应式样式

// 循环生成栅格系统
@for $i from 1 through 12 {.col-#{$i} {width: $i / 12 * 100%;}
}// 条件判断
$use-dark-theme: true;@if $use-dark-theme {body {background: #333;color: #fff;}
} @else {body {background: #fff;color: #000;}
}

案例效果：自动生成栅格类，根据主题变量动态切换暗/亮模式样式。

---

Less（语法对比与案例）

1. 变量与混合宏：按钮样式复用

// 定义变量
@base-bg: #fff;
@base-color: #333;// 混合宏（参数化）
.button(@bg: @base-bg, @padding: 10px) {background: @bg;padding: @padding;border-radius: 5px;transition: background 0.3s;
}// 应用
.primary-btn {.button(@primary-color, 15px); // 调用并覆盖默认参数
}

案例效果：与Sass类似，但参数使用@变量名语法，更贴近原生CSS。

2. 条件语句（when）：动态样式

// 根据变量值应用样式
@theme-color: green;.button {background: @theme-color;.when(lightness(@theme-color) > 50%) {color: #000; // 浅色背景时调整文本色}.when(lightness(@theme-color) <= 50%) {color: #fff; // 深色背景时调整文本色}
}

案例效果：使用内置函数和条件混合自动适配文本颜色，无需手动判断。

3. 内置函数：随机背景色

.random-bg {background: #`"rgb(" + join(saturate(lighten(random(100%), 30%), 20%), ', ') + ")"`;
}

案例效果：利用join()、random()等函数生成随机且饱和度高的背景色。

---

差异与实战建议：

● Sass继承（@extend）：适合复用完整样式（如组件基础结构），但需注意过度继承可能增加选择器权重问题。

● Less条件混合（when）：适合根据变量动态调整单一属性，配合内置函数灵活度高。

● 实际选择：

○ 项目需复杂逻辑（如响应式栅格）、更灵活继承 → Sass

○ 偏好轻量级、接近原生CSS语法 → Less

核心价值：通过变量、复用机制和动态逻辑，减少重复代码，提升样式可维护性，适配大型项目需求。