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

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

一、核心功能对比

1. 变量

LESS：
- 定义：@变量名: 值;
- 作用域：默认全局，需注意命名冲突。
- 示例：
  less 复制代码
```
@primary-color: #007BFF;
@font-size: 16px;

body {
  color: @primary-color;
  font-size: @font-size;
}
```
SCSS：
- 定义：$变量名: 值;
- 作用域：支持局部作用域（通过@use引入文件）。
- 示例：
  scss 复制代码
```
$primary-color: #007BFF;
$font-size: 16px;

body {
  color: $primary-color;
  font-size: $font-size;
}
```

2. 嵌套规则

LESS：

支持选择器嵌套，结构清晰。

示例：

less 复制代码

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

SCSS：

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

示例：

scss 复制代码

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

3. 混合（Mixins）

LESS：
- 定义：.mixin-name() { ... }
- 调用：.mixin-name();
- 支持参数和条件逻辑（受保护混入）。
- 示例：
  less 复制代码
```
.border-radius(@radius: 5px) {
  border-radius: @radius;
}

.box {
  .border-radius(10px);
}
```
SCSS：
- 定义：@mixin mixin-name { ... }
- 调用：@include mixin-name;
- 支持参数和动态内容（@content）。
- 示例：
  scss 复制代码
```
@mixin border-radius($radius: 5px) {
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}
```

4. 继承（Extend）

LESS：

无原生@extend，需通过混入实现类似功能。

示例（模拟继承）：

less 复制代码

.button {
  padding: 8px 16px;
  border: none;
}

.primary-button {
  .button(); // 调用混入
  background: @primary-color;
}

SCSS：

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

示例：

scss 复制代码

.button {
  padding: 8px 16px;
  border: none;
}

.primary-button {
  @extend .button;
  background: $primary-color;
}

5. 函数与运算

LESS：
- 内置函数（如lighten、darken）、数学运算（+, /等）。
- 示例：
  less 复制代码
```
@base: #333;
.text {
  color: lighten(@base, 20%); // 调整颜色亮度
}
```
SCSS：
- 支持自定义函数、复杂运算（@for循环、@if条件）。
- 示例（生成多列布局）：
  scss 复制代码
```
@for $i from 1 to 4 {
  .column-#{$i} {
    width: 100% / 4 * $i;
  }
}
```

6. 模块化

LESS：
- 通过@import引入文件，变量和混入默认全局。
- 风险：命名冲突，需谨慎管理。
- 示例：
  less 复制代码
```
@import 'variables.less';
@import 'mixins.less';
```

SCSS：

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

示例：

scss 复制代码

@use 'variables' as vars;
@use 'mixins' as mix;

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

二、编译与生态

LESS：
- 编译：依赖lessc（Node.js）或浏览器端less.js。
- 优势：轻量级，支持客户端实时编译。
- 生态：曾被Bootstrap 3采用，适合快速原型开发。
SCSS：
- 编译：依赖dart sass（主流），集成Webpack等构建工具。
- 优势：性能优，社区生态丰富（如Compass框架）。
- 生态：被Bootstrap 4+采用，适合大型项目。

三、选择建议

场景	推荐选择	理由
快速上手/旧项目兼容	LESS	语法简单，客户端可编译
复杂逻辑/大型项目	SCSS	模块化设计、强大的控制指令
团队协作/严格规范	SCSS	局部作用域减少冲突，生态成熟

四、示例演示

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

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 示例（主题化卡片）

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在复杂场景和团队协作中更具优势。