参考资料

1. CSS浮动详细说明以及案例
2. CSS网格详细说明以及案例
3. ui状态伪类选择器详细说明以及案例
4. CSS定位详细说明以及案例
5. css3阴影效果
6. css如何居中一个div
7. * 通配符选择器详细说明以及案例
8. CSS3 阴影

CSS有哪些预处理器？

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)