CSS预处理器：Sass/Less入门

CSS预处理器（如Sass、Less）通过引入变量、嵌套、混合等特性，增强CSS的可维护性和开发效率。Sass基于Ruby（后移植到Dart），Less基于JavaScript，两者功能类似但语法略有差异。

Sass

通过npm安装Dart版本的Sass（推荐）：

bash 复制代码

npm install -g sass

编译.scss文件：

bash 复制代码

sass input.scss output.css

Less

通过npm安装Less：

bash 复制代码

npm install -g less

编译.less文件：

bash 复制代码

lessc input.less output.css

Sass （使用$符号）：

scss 复制代码

$primary-color: #3498db;
body { color: $primary-color; }

Less （使用@符号）：

less 复制代码

@primary-color: #3498db;
body { color: @primary-color; }

两者语法一致：

scss 复制代码

nav {
  ul { margin: 0; }
  a { color: red; }
}

Sass：

scss 复制代码

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

Less：

less 复制代码

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

Sass （使用@extend）：

scss 复制代码

.error { color: red; }
.warning { @extend .error; }

Less（通过混合模拟）：

less 复制代码

.error { color: red; }
.warning { .error(); }

两者均支持数学运算和内置函数：

scss 复制代码

$width: 100px;
.container { width: $width * 2; }

Sass特有功能

Less特有功能

通过预处理器可显著提升CSS开发体验，建议从变量和嵌套开始逐步实践高级功能。