预处理器完整功能介绍和示例演示（LESS/SCSS）

以下是关于 LESS 和 SCSS（Sass的一种语法）两种主流CSS预处理器的功能介绍、核心差异及示例演示：

一、核心功能对比

1. 变量

• LESS：

  • 定义：@变量名: 值;
  • 作用域：默认全局，需注意命名冲突。
  • 示例：

    @primary-color: #007BFF;
    @font-size: 16px;
    
    body {
      color: @primary-color;
      font-size: @font-size;
    }
    

• SCSS：

  • 定义：$变量名: 值;
  • 作用域：支持局部作用域（通过@use引入文件）。
  • 示例：

    $primary-color: #007BFF;
    $font-size: 16px;
    
    body {
      color: $primary-color;
      font-size: $font-size;
    }
    

2. 嵌套规则

• LESS：

  • 支持选择器嵌套，结构清晰。
  • 示例：

    .container {
      width: 100%;
      .item {
        margin: 10px;
        &:hover {
          background: lighten(@primary-color, 10%);
        }
      }
    }
    

• SCSS：

  • 嵌套语法与CSS一致，支持伪类和媒体查询嵌套。
  • 示例：

    .container {
      width: 100%;
      .item {
        margin: 10px;
        &:hover {
          background: lighten($primary-color, 10%);
        }
      }
    }
    

3. 混合（Mixins）

• LESS：

  • 定义：.mixin-name() { ... }
  • 调用：.mixin-name();
  • 支持参数和条件逻辑（受保护混入）。
  • 示例：

    .border-radius(@radius: 5px) {
      border-radius: @radius;
    }
    
    .box {
      .border-radius(10px);
    }
    

• SCSS：

  • 定义：@mixin mixin-name { ... }
  • 调用：@include mixin-name;
  • 支持参数和动态内容（@content）。
  • 示例：

    @mixin border-radius($radius: 5px) {
      border-radius: $radius;
    }
    
    .box {
      @include border-radius(10px);
    }
    

4. 继承（Extend）

• LESS：

  • 无原生@extend，需通过混入实现类似功能。
  • 示例（模拟继承）：

    .button {
      padding: 8px 16px;
      border: none;
    }
    
    .primary-button {
      .button(); // 调用混入
      background: @primary-color;
    }
    

• SCSS：

  • 支持@extend，直接继承其他选择器样式。
  • 示例：

    .button {
      padding: 8px 16px;
      border: none;
    }
    
    .primary-button {
      @extend .button;
      background: $primary-color;
    }
    

5. 函数与运算

• LESS：

  • 内置函数（如lighten、darken）、数学运算（+, /等）。
  • 示例：

    @base: #333;
    .text {
      color: lighten(@base, 20%); // 调整颜色亮度
    }
    

• SCSS：

  • 支持自定义函数、复杂运算（@for循环、@if条件）。
  • 示例（生成多列布局）：

    @for $i from 1 to 4 {
      .column-#{$i} {
        width: 100% / 4 * $i;
      }
    }
    

6. 模块化

• LESS：

  • 通过@import引入文件，变量和混入默认全局。
  • 风险：命名冲突，需谨慎管理。
  • 示例：

    @import 'variables.less';
    @import 'mixins.less';
    

• SCSS：

  • 支持@use和@forward，实现局部作用域和按需加载。
  • 示例：

    @use 'variables' as vars;
    @use 'mixins' as mix;
    
    .header {
      color: vars.$primary-color;
      @include mix.border-radius(5px);
    }
    

二、编译与生态

1. LESS：

   • 编译：依赖lessc（Node.js）或浏览器端less.js。
   • 优势：轻量级，支持客户端实时编译。
   • 生态：曾被Bootstrap 3采用，适合快速原型开发。

2. SCSS：

   • 编译：依赖dart sass（主流），集成Webpack等构建工具。
   • 优势：性能优，社区生态丰富（如Compass框架）。
   • 生态：被Bootstrap 4+采用，适合大型项目。

三、选择建议

四、示例演示

1. LESS 示例（响应式按钮）

@primary-color: #007BFF;
@padding: 10px 20px;

// 混入定义
.button-style(@bg-color: @primary-color) {
  background: @bg-color;
  color: white;
  padding: @padding;
  border: none;
  border-radius: 4px;
}

// 按钮样式
.button {
  .button-style();
  &:hover {
    opacity: 0.9;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .button {
    padding: 8px 16px;
  }
}

2. SCSS 示例（主题化卡片）

$primary-color: #007BFF;
$spacing: 16px;

@mixin card($bg-color: $primary-color) {
  background: $bg-color;
  padding: $spacing;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card {
  @include card();
  .title {
    color: darken($primary-color, 20%);
  }
}

// 扩展卡片样式
.card-secondary {
  @extend .card;
  @include card(#6C757D);
}

通过以上对比，可根据项目需求选择适合的预处理器。LESS适合轻量级、快速迭代，而SCSS在复杂场景和团队协作中更具优势。