The Magic Before CSS - Preprocessors

那些发生在 CSS 之「前」的魔法 —— 预处理器

@ CSS

前言

在前端开发领域，经常会听到一些预处理器 (Pre-processor)，比如 Sass、Less、Stylus，这些工具是什么？为什么会存在？本文将探讨以下几个重点（附带示例）：

  • 什么是 CSS 处理器？
  • 它们提供了什么好处？为什么需要它们？
  • 有哪些可选的预处理器？
  • 可能不应该使用预处理器的原因

什么是 CSS 处理器？

在今天，编写面向未来的 CSS

「CSS 处理器」的存在，主要是为了弥补 CSS 开发中功能不够完善的问题。早期开发中，缺乏复杂的逻辑和功能来编写可复用且易于管理的代码，这使开发者面临了 难管理、难扩展 的困境，尤其是在大型项目中，问题变得更加严重。于是，CSS 处理器应运而生，用于解决这些问题。

通过预处理器扩展 CSS 的功能和语法，可以实现更复杂的逻辑和更简洁的代码，例如 Variables、Functions、Mixins、Code Nesting 等，从而践行 DRY 原则。

或者通过后处理器对现有的 CSS 进行处理，如压缩、优化、修改现有的 CSS，例如 Import、Minification、Autoprefixer、CSS Nano 等。

使用预处理器的理由

让编写 CSS 充满可能性！

  • 写嵌套 CSS 时无需重复命名（Nesting）
  • 无需将所有代码都挤在一个文件中（Modules/Mixins）
  • 可以使用变量和运算符（Variables/Operators）
  • 避免重复编写相同的代码（Extend/Inheritance）

总的来说，预处理器帮助我们更高效地编写 CSS。我们可以把预处理器语言（可以想象成包含语法糖的 CSS）编译成普通 CSS 使用。

当然，浏览器仍然只识别 CSS，并不了解任何预处理器语言。因此，在使用时需要将预处理器的语法“预”处理为 CSS。尽管各种预处理器有自己定义的逻辑和语法，最终都会被转译为 CSS。

如何使用预处理器？

预处理器可以通过包管理器安装到项目中，或者使用现有软件如 Prepros 都能实现相同的目的。不过，对于初学者来说，推荐在 CodePen 中设置使用 CSS 预处理器🔗 来练习（免费注册即可）。

Sass — Syntactically Awesome Style Sheets 广受欢迎的预处理器

Sass 是目前最受欢迎的预处理器（State of CSS 2021🔗），也是最早出现的预处理器之一。它拥有庞大的社区和丰富的学习资源，是一个成熟稳定、功能强大的预处理器。Sass 最初基于 Ruby 语言编写，现在官方推荐使用全新的 Dart Sass🔗。

编写 Sass 时有两种语法 —— SASS 和 SCSS。其中，SCSS 更接近 CSS 的样式，使用大括号和分号来嵌套语句，与规范的 CSS 保持一致，也就意味着符合规范的 CSS 语法就是符合规范的 SCSS 语法。

我个人更喜欢简洁的 SASS。如果你特别厌烦在写 CSS 时输入大量的 {} 和 ;，可以选择 SASS！除此之外，两者只是书写习惯不同，本质上没有区别。

如果还不清楚，可以在后续章节中通过 Sass 示例了解它所提供的解决方案。

LESS — Leaner Style Sheets

LESS 是一款撰写于 Javascript 的预处理器，无疑是 Sass 主要的竞争对手，提供了。不过自从 Bootstrap 于第四版更换它们的预处理器为 Sass 后就较少人使用了。

Stylus

Stylus 是一款撰写于 Node JS 的预处理器，更小众，使用的人比例更少，不过偶尔还是会出现因此在这里标注一下。

最后，为什么你可能不需要预处理器

解释完了预处理器的好处，也要了解什么场合，你不应该用它。

非原生

前端开发的世界一直在变换，一个专案新增多余的依赖 (Dependency) 并不是一件好事；而非原生的代码可能在某一天就被原生所取代了，代表可能未来某一天某些预处理器提供的功能被赶上，可能需要再重构一遍代码。

更高层级的抽象

预处理器施作 CSS 在一个更高的抽象级别，可能不了解的人需要花费成本来去维护你的代码，营造一个更复杂的开发环境，投入额外的时间成本学习。

专案没有很大

使用以上这些功能还需要安装配置与学习，不如直接开始写 CSS 就好。

结语

最终，要不要使用预处理器？要使用哪一款？关系到团队与个人的偏好或专案的规模来决定，精进 CSS，不管哪款预处理器都能样样通。

参考资料