参考资料

1. Flex布局如何优化页面加载速度？
2. 子选择器详细说明以及案例
3. css div阴影效果,
4. 有没有推荐的 CSS 过渡动画库？
5. css阴影效果代码
6. 动态伪类选择器详细说明以及案例
7. Flex布局在动画制作中的应用？
8. Flexbox布局有哪些常见的误区？

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)