CSS有哪些预处理器？

参考资料

1. 如何编写CSS代码？
2. css div内容居中
3. 边框属性详细说明以及案例
4. 如何避免Flex容器高度塌陷？
5. CSS 阴影效果属性
6. Flex布局与Grid布局的对比？
7. CSS 阴影边框设置
8. css怎么使div居中

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)

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。