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

Sass（SCSS语法示例）

1. 变量：统一管理颜色

css 复制代码

// 定义变量
$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. 嵌套：简化层级结构

css 复制代码

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

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

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

css 复制代码

// 定义按钮样式混合宏
@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）：复用基础样式

css 复制代码

// 基础样式
.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. 逻辑控制：动态生成响应式样式

css 复制代码

// 循环生成栅格系统
@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. 变量与混合宏：按钮样式复用

css 复制代码

// 定义变量
@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）：动态样式

css 复制代码

// 根据变量值应用样式
@theme-color: green;

.button {
  background: @theme-color;
 .when(lightness(@theme-color) > 50%) {
    color: #000; // 浅色背景时调整文本色
  }
 .when(lightness(@theme-color) <= 50%) {
    color: #fff; // 深色背景时调整文本色
  }
}

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

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

css 复制代码

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

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

差异与实战建议：

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

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

● 实际选择：

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

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

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