以下是对 Sass/SCSS、Less 和 Stylus 这几种 CSS 预处理器的对比：
一、语法风格
1. Sass/SCSS：
-
Sass：使用缩进语法，不使用花括号和分号，类似于 Ruby 的语法。
收起
sass
$primary-color: #3498db
body
color: $primary-color
font-size: 16px
-
SCSS：使用类似 CSS 的语法，包含花括号和分号，是 CSS 的超集。
收起
scss
$primary-color: #3498db;
body {
color: $primary-color;
font-size: 16px;
}
2. Less：
-
使用类似 CSS 的语法，使用花括号和分号，也是 CSS 的超集。
收起
less
@primary-color: #3498db;
body {
color: @primary-color;
font-size: 16px;
}
3. Stylus：
-
语法非常灵活，可以使用缩进或花括号和分号，还支持不带前缀的属性名，甚至可以省略冒号。
收起
stylus
primary-color = #3498db
body
color primary-color
font-size 16px
二、变量
1. Sass/SCSS：
-
使用
$符号定义变量，例如$primary-color: #3498db;。
2. Less：
-
使用
@符号定义变量，例如@primary-color: #3498db;。
3. Stylus：
- 可以使用
=或:=定义变量，例如primary-color = #3498db。
三、混合（Mixins）
1. Sass/SCSS：
-
使用
@mixin定义混合，@include引入混合。
收起
scss
@mixin border-radius($radius) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
}
.box {
@include border-radius(5px);
}
2. Less：
-
使用
.mixin()定义混合，使用.mixin()或.mixin引入混合。
收起
less
.border-radius(@radius) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
.box {
.border-radius(5px);
}
3. Stylus：
-
使用
= mixin()定义混合，使用mixin()引入混合。
收起
stylus
border-radius(radius) {
border-radius: radius;
-webkit-border-radius: radius;
-moz-border-radius: radius;
}
.box {
border-radius(5px);
}
四、继承
1. Sass/SCSS：
-
使用
@extend实现继承。
收起
scss
.button {
border: 1px solid #ccc;
padding: 10px 20px;
}
.submit-button {
@extend.button;
background-color: #3498db;
color: #fff;
}
2. Less：
-
使用
:extend()实现继承。
收起
less
.button {
border: 1px solid #ccc;
padding: 10px 20px;
}
.submit-button {
&:extend(.button);
background-color: #3498db;
color: #fff;
}
3. Stylus：
-
使用
@extend实现继承。
收起
stylus
.button {
border: 1px solid #ccc;
padding: 10px 20px;
}
.submit-button {
@extend.button;
background-color: #3498db;
color: #fff;
}
五、函数
1. Sass/SCSS：
-
可以使用
@function定义函数，例如：
收起
scss
@function double($number) {
@return $number * 2;
}
.sidebar {
width: double(200px);
}
2. Less：
-
可以使用命名空间和函数，例如：
收起
less
#namespace() {
.double(@number) {
@return: @number * 2;
}
}
.sidebar {
width: #namespace.double(200px);
}
3. Stylus：
-
可以使用普通函数，例如：
收起
stylus
double(number) {
return number * 2
}
.sidebar {
width: double(200px);
}
六、导入
1. Sass/SCSS：
-
使用
@import导入部分文件，部分文件以下划线_开头，不会单独编译。
收起
scss
@import 'base';
2. Less：
-
使用
@import导入文件，部分文件通常以.less结尾。
收起
less
@import 'base.less';
3. Stylus：
-
使用
@import导入文件，部分文件通常以.styl结尾。
收起
stylus
@import 'base.styl'
七、条件语句和循环
1. Sass/SCSS：
-
支持
@if、@else、@for、@each、@while等条件和循环语句。
收起
scss
$columns: 4;
@for $i from 1 through $columns {
.col-#{$i} { width: (100% / $columns) * $i; }
}
2. Less：
-
支持
when条件语句和循环语句，例如：
收起
less
.generate-columns(@n, @i: 1) when (@i =< @n) {
.col-@{i} { width: (@i * 100% / @n); }
.generate-columns(@n, (@i + 1));
}
.generate-columns(4);
3. Stylus：
-
支持
if、else、for、unless等条件和循环语句，例如：
收起
stylus
for num in (1..4) {
.col-{num} { width: (100% / 4) * num }
}
八、编译工具
1. Sass/SCSS：
-
可以使用
sass或scss命令行工具，也可以与构建工具集成，如 Webpack 的sass-loader、Gulp 的gulp-sass、Grunt 的grunt-sass等。
2. Less：
-
可以使用
lessc命令行工具，也可以与构建工具集成，如 Webpack 的less-loader、Gulp 的gulp-less、Grunt 的grunt-less等。
3. Stylus：
- 可以使用
stylus命令行工具，也可以与构建工具集成，如 Webpack 的stylus-loader、Gulp 的gulp-stylus、Grunt 的grunt-stylus等。
九、社区和生态
1. Sass/SCSS：
-
拥有广泛的社区支持，是最流行的 CSS 预处理器之一，有大量的开源项目和库。
2. Less：
-
也有一定的社区支持，尤其是在使用 Bootstrap 时，因为 Bootstrap 4 以前使用 Less 编写。
3. Stylus：
- 社区相对较小，但语法非常灵活，适合喜欢简洁语法的开发者。
十、总结
- Sass/SCSS：功能强大，语法清晰（尤其是 SCSS 形式），社区广泛，是许多开发者的首选，适合大型项目。
- Less：语法类似于 CSS，易于学习，适合熟悉 CSS 的开发者，在 Bootstrap 社区中使用较多。
- Stylus：语法非常灵活，可自定义性强，适合追求简洁和灵活性的开发者，但社区相对较小。
