CSS 预处理器

CSS 预处理器是一种语言，它们扩展了普通 CSS 的语法，使开发人员可以使用变量、嵌套规则、函数、操作符和混合等特性。这些语言通常称为 CSS 扩展语言或 CSS 预处理器，因为它们需要通过一个单独的编译过程将其转换为普通的 CSS 语法。

常见的 CSS 预处理器

在市场上，有几个常见的 CSS 预处理器：Sass、Less、Stylus 和 PostCSS。这里简要介绍一下这些预处理器的特点。

Sass

Sass 是一种 CSS 扩展语言，它具有很多功能，如：

• 变量和计算 —— Sass 可以在 CSS 中使用变量，同时还可以进行数学运算。
• 嵌套规则 —— 可以在 Sass 中嵌套 CSS 规则，使代码更易读。
• Mixins —— 类似于函数，可以将代码块重复使用在不同的规则中。
• 继承 —— 可以通过扩展继承父选择器的规则。
• 预定义函数 —— Sass 中拥有许多有用的函数。

Less

Less 是一种 CSS 扩展语言，类似于 Sass，它也具有变量、嵌套规则、Mixin 和扩展等功能。Less 的主要特点如下：

• 功能丰富的 API —— Less 内置了许多有用的函数、宏和操作符。
• 没有需求的额外库 —— Less 采用 JavaScript 实现，因此可以与现有的 JavaScript 库无缝集成。
• 与 Sass 相似的语言结构 —— Less 具有与 Sass 相似的嵌套语法，可以帮助开发人员更容易地查看和更改代码。

Stylus

Stylus 是一种 CSS 扩展语言，是最新的预处理器之一。其主要特点如下：

• 简易的语法 —— Stylus 使用的语法少于其他预处理器，使其看起来更像 CSS。
• 嵌套和标记 —— Stylus 支持嵌套标记，例如使用&来引用类名，使其更易于理解。
• 添加和重写属性 —— 在代码块中添加或重写属性不需要额外的代码。

PostCSS

PostCSS 不同于 Sass、Less 和 Stylus。它更像是一种 CSS 处理器，它扩展了原始 CSS 语法，通过使用插件对 CSS 进行转换和操作，从而提供了一种 “CSS 后处理器” 的概念。

PostCSS 支持使用插件来添加其他特性, 以达到同样的效果。有许多优秀的插件，例如：

• Autoprefixer —— 它基于 Caniuse.com 数据库，向 CSS 添加必要的规范前缀。
• PostCSS Sorting —— 它可以帮助开发人员根据特定规则对 CSS 属性进行排序。
• CSSNext —— 它可以让开发人员在当前浏览器不支持的情况下使用 CSS 未来的功能。

总体来说， PostCSS 是一种灵活而强大的解决方案，可以取代或与其他预处理器共存。

代码示例

以下是一些 Sass 代码示例。使用 $ 符号定义变量：

$primary-color: #ff0000;
$secondary-color: #00ff00;

body {
  background-color: $primary-color;

  .header {
    color: $secondary-color;
  }
}

Mixin 可以帮助减少重复的 CSS 代码：

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

button {
  @include border-radius(10px);
}

Stylus 的嵌套语法类似于 JavaScript 下的 JSON：

body
  background-color: #ff0000;

  .header
    color: #00ff00;

PostCSS 使用插件来对 CSS 进行转换。以下是一个使用 Autoprefixer 的示例：

/* 未使用 Autoprefixer */
.box {
  display: flex;
  justify-content: center;
}

/* 使用 Autoprefixer */
.box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}