预处理器完整功能介绍和示例演示（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在复杂场景和团队协作中更具优势。