CSS有哪些预处理器？

参考资料

1. 详细说明Flexbox基础属性
2. CSS格式化/压缩有哪些
3. CSS 阴影效果属性
4. 如何调试Flex布局问题？
5. Vanta.js 如何与 CSS 过渡结合？
6. CSS字体属性详细说明以及案例
7. 属性选择器详细说明以及案例
8. 伪类选择器详细说明以及案例

1. Sass

• $variable：定义变量。

• @mixin：定义可复用的代码块。

• @include：调用混合。

• @extend：继承样式。

• 简介：Sass（Syntactically Awesome Stylesheets）是最流行的CSS预处理器之一，支持变量、嵌套、混合等功能。

• 属性说明：

• 用法示例：  

  $primary-color: #333;
  @mixin border-radius($radius) {
    border-radius: $radius;
  }
  .button {
    color: $primary-color;
    @include border-radius(5px);
  }

2. Less

• @variable：定义变量。

• .mixin()：定义混合。

• &：引用父选择器。

• 简介：Less是一种动态样式语言，语法与CSS高度兼容，支持变量、嵌套、运算等。

• 属性说明：

• 用法示例：  

  @primary-color: #333;
  .border-radius(@radius) {
    border-radius: @radius;
  }
  .button {
    color: @primary-color;
    .border-radius(5px);
  }

3. Stylus

• variable = value：定义变量。

• mixin()：定义混合。

• @extend：继承样式。

• 简介：Stylus语法灵活，支持缩进或类CSS写法，提供变量、混合、函数等特性。

• 属性说明：

• 用法示例：  

  primary-color = #333
  border-radius(radius)
    border-radius radius
  .button
    color primary-color
    border-radius(5px)