CSS 预处理器与后处理器简介

# 1. CSS 预处理器简介

CSS 预处理器是一种工具，可以扩展普通的 CSS，使其具有更强大的功能。通过引入变量、嵌套、混合等特性，预处理器能够提高开发效率并增强代码的可维护性。常见的 CSS 预处理器有 Sass 和 Less。Sass 是功能更为强大且应用更广泛的预处理器，拥有丰富的功能和强大的工具链。Less 则更简洁，易学易用，适合快速开发。使用 CSS 预处理器，开发者可以轻松地管理样式代码，并快速地更新样式。同时，预处理器还能帮助规范样式代码，减少重复劳动，提高开发效率。在实际项目中，选择适合自己团队和项目需求的预处理器，能够带来更好的开发体验。

# 2. CSS 预处理器的语法

- 2.1 变量
- 2.1.1 定义变量
CSS 预处理器的变量使用 $ 符号定义。在 Sass 中，我们可以定义一个颜色变量：

    $primary-color: #333333;

这样我们就定义了一个名为 primary-color 的变量，其数值为 #333333。

- 2.1.2 使用变量
使用定义好的变量时，只需要在对应的属性值中使用变量名即可：

    body {
      background-color: $primary-color;
    }

这样就可以让 body 元素的背景色为我们之前定义的 $primary-color 变量所代表的颜色值。

- 2.2 嵌套
- 2.2.1 父选择器引用
在 CSS 预处理器中，可以通过 & 符号引用父选择器，使得样式书写更加简洁：

    .btn {
      &-primary {
        background-color: $primary-color;
      }
    }

这样生成的样式会自动转译为 `.btn-primary {background-color: #333333;}`。

- 2.2.2 子选择器嵌套
可以嵌套子选择器，使得样式层级更加清晰，减少重复书写：

    .card {
      h2 {
        color: $primary-color;
      }
    }

这样 h2 元素只会在 .card 中生效。

- 2.2.3 兄弟选择器嵌套
通过兄弟选择器嵌套，简化样式书写，减少代码冗余：

    .item {
      & + & {
        margin-top: 10px;
      }
    }

这样每个 .item 元素之间都有 10px 的上外边距。

- 2.3 混合
- 2.3.1 创建混合
混合可以理解为一段可重用的样式代码块，通过 @mixin 定义：

    @mixin button($color) {
      background-color: $color;
      color: white;