Css预处理器

1. 相关问题

• CSS 主要有哪些预处理器
• 为什么需要用预处理器
• 各预处理器优缺点

梗概:

Sass-scss #Less #StylusPostCSS #工程化-提升效率 CSS 本身不属于可编程语言，当前端项目逐渐庞大之后 CSS 的维护也愈加困难。 CSS 预处理器所做的本质上是为 CSS 增加一些可编程的特性，通过变量、嵌套、简单的程序逻辑、计算、函数等特性，通过工程化的手段让 CSS 更易维护，提升开发效率。 目前主流的 CSS 预处理器主要有 Sass、Less、Stylus、PostCSS。

1. 常见的Css预处理器

1. PostCSS

PostCSS 是目前最为流行的 CSS 预/后处理器。PostCSS 本体功能比较单一，它提供一种用 JavaScript 来处理 CSS 的方式。PostCSS 会把 CSS 解析成 AST（Abstract Syntax Tree 抽象语法树），之后由其他插件进行不同的处理。

1.1. 功能

PostCSS 本体功能比较单一，大多数的 CSS 处理功能都由插件提供，下面是一些常用的插件：

• Autoprefixer 为 CSS 中的属性添加浏览器特定的前缀。
• postcss-preset-env 根据 browserslist 指定的目标浏览器将一些 CSS 的新特性转换为目标浏览器所支持的语法。
• cssnano 提供 CSS 压缩功能。
• postcss-nested 提供 CSS 嵌套功能。
• postcss-px-to-viewport 提供 px 转 vw 功能。
• postcss-custom-properties 支持 CSS 的自定义属性。

1.2. 适用范围:

1.3. 优点

• 插件系统完善，扩展性强。
• 配合插件功能齐全。
• 生态优秀。

1.4. 缺点

• 配置相对复杂。

2. Sass

Sass 在完全兼容 CSS 语法的前提下，给 CSS 提供了变量、嵌套、混合、操作符、自定义函数等可编程能力。

2.1. 功能

Sass 常用的有几种功能：

• 变量：变量中可以存储颜色、字体或任何 CSS 值。
• 嵌套：可嵌套 CSS 选择器，提供清晰的层次结构。
• 混合：可以定义&重用代码块。
• 扩展/集成：可以在一个选择器内继承另一个选择器。
• 操作符：可以在 CSS 中使用操作符进行计算。
• 条件/循环语句：可以循环/条件生成 CSS。
• 自定义函数：可以自定义复杂操作的函数。

2.2. 适用范围:

2.2. 优点

• 使用广泛。
• 功能支持完善。
• 可编程能力强。

2.3. 缺点

• CSS 的复杂度不可控。
• node-sass 国内安装不易（非 Sass 本身的缺点，dart-sass 可代替）。

2.3. 教程:

child::Scss

3. Less

Less 和 Sass 类似，完全兼容 CSS 语法，并给 CSS 提供了变量、嵌套、混合、运算等可编程能力。Less 通过 JavaScript 实现，可在浏览器端直接使用。

3.1. 功能

Less 常用的有几种功能：

• 变量：变量中可以存储颜色、字体或任何 CSS 值。
• 嵌套：可嵌套 CSS 选择器，提供清晰的层次结构。
• 混合：可以定义&重用的代码块。
• 扩展/集成：可以在一个选择器内继承另一个选择器。
• 运算：可以在 CSS 中进行计算。
• 条件/循环语句：可以循环/条件生成 CSS。

3.2. 适用范围:

3.2. 优点

• 使用广泛。
• 可以在浏览器中运行，容易实现主题定制功能。

3.3. 缺点

• 不支持自定义函数（可通过 mixins 实现简单逻辑）。
• 编程能力相对较弱。

4. Stylus

Stylus 基础功能和 Sass / Less 十分类似。Stylus 的特点是冒号、分号、逗号和括号都是可选项，所以可以写出非常简洁的 CSS，示例如下：

body
  background-color: #000
body::after
  content: 'HZFEStudio'
  color: #fff
  font-size: 20px