浅谈 CSS 预处理器（二）：如何快速上手？

原创 · CSS魔法

不想错过更多好文？请点击上面的 “CSS魔法” 订阅公众号。

看完了上一篇《为什么要使用预处理器？》的各种安利，你应该已经跃跃欲试了吧！接下来我们来聊一聊，如何快速上手 CSS 预处理器。

在接触 CSS 预处理器之前，你最好已经具备了一定的 CSS 基础和实践能力，比如你可以完成常见网页的样式和布局；另外，如果你有一些项目经验就更好了，比如组织过整个网站的 CSS 文件、设计过 CSS 代码的分层和复用等等。

因为，当你有了这方面的经验之后，在学习 CSS 预处理器时，对它提供的功能会更有感触，会更有针对性地解决过往 CSS 开发中的种种痛点。

好，接下来，魔法哥建议 “三步走”。

第一步：选择语言

首先，你需要选定一门 CSS 预处理语言。目前主流的预处理语言主要是 Sass、Less 和 Stylus，它们的流行度差不多也是这个顺序。

（图片来源：ashleynolan.co.uk）

如果你比较保守，可以选择 Sass（或它的变种 SCSS）。因为它相当成熟，用它的人也最多，比如 Bootstrap 4 就是用 Sass 写的。你遇到的坑一般都已经有无数人趟过了，在网上比较容易找到 Sass 相关的文档和教程。

如果你不喜欢随大流，那我就要向你推荐 Stylus 了！与 Sass 和 Less 相比，Stylus 更像是一门编程语言，功能强大，语法灵活。同时，Stylus 完全由 JavaScript 实现，对 Node.js 工具链极为友好。目前百姓网主站和百度的部分业务在用 Stylus。

除了上述两项以外，还有个 Less。不过这里就不多介绍了，因为在魔法哥看来，除了一些老项目还在用，Less 跟前两者相比已经没啥优势了。

在选好你中意的预处理语言之后，我建议你打开它的官网，大致了解一下它的主要功能和语法。

在最开始接触一门 CSS 预处理语言的时候，我们不需要立刻成为这门语言的专家。只需要把官方文档快速扫一遍，建立一个整体的印象，为接下来的动手尝试做好准备就可以了；同时多看看官方的示例代码，找找感觉。

当你日后觉得有必要深入学习的时候，就要细嚼慢咽官方文档了，同时还有必要找些教程或书籍来仔细研读。

上面提到过，Sass 的资料最多，也有中文书。Stylus 目前还没有中文书出版，不过张鑫旭老师翻译了中文文档，也写过教程，都是不错的学习资源。

走到这一步，你就可以找个地方放手实践啦！找个一张网页设计稿来写写看，或者翻出一个以前写的 CSS 文件来改造一番：你可以试试用变更和 Mixin 来把重复的值和代码片断抽象出来，用嵌套来把代码组织成一个个段落，在这个过程中逐渐熟悉这门预处理语言。

“慢着，你还没说编译的事儿呢！”

没错，要把预处理器代码应用到浏览器环境，还需要操心编译这一步。不过在上手阶段，你可以先把配环境的事儿先放一放，因为你可以选择那些开箱即用的环境，先玩起来再说。

如果你对编辑器没啥特殊要求，可以尝试像 JS Bin 或 CodePen 这样的在线 demo 网站，它们通常都提供了实时的 CSS 预处理器编译功能。

以 CodePen 为例，我们在新建一个 Pen 之后，点击 CSS 窗格左上角的小齿轮按钮，进入设置界面，在 “CSS Preprocessor” 一栏选择你需要的语言就可以了（如下图所示）。

当然如果你懒得设置的话，可以直接套用魔法哥已经配置好的 Pen 模板。打开 http://codepen.io/pen?template=QKQvRw 这个链接就可以直接写 Stylus 代码了！

如果你还是想在本机舒适的 IDE 里写代码，或者想尝试用模块来拆分代码，那不妨试试魔法哥为你配置好的 Stylus 试用环境。

在 GitHub 上找到 cssmagic/stylus-playground 这个项目，按照 README 的介绍，把它下载到本地，然后运行一个简单的启动命令就可以开始玩了。

这个简易的试用环境已经配置好了 Stylus 语言的编译程序，默认加载 Normalize 和 CSS Reset，还加入了 Autoprefixer 为你的代码自动添加浏览器前缀。此外，这个环境还设置了一些便利机制，帮助你回避一切与写代码无关的琐事，只为让你写得舒服。

在运行启动命令之后，你的浏览器会自动打开一个 HTML 页面；然后每当你修改这个试用环境内的 HTML 文件或 Stylus 文件时，这个浏览器页面都会自动更新，让你看到最新的修改效果。是不是很方便！

学会了一门 CSS 预处理语言之后，你应该会迫不及待地将它应用到项目中去吧！在把老代码改造成预处理代码之后，如何把这它们部署到生产环境？

最简单的情况，就是在现有的部署流程之前，加一道编译 CSS 预处理语言的步骤。当你把所有 *.sass 或 *.styl 文件编译成 *.css 文件之后，接下来的所有事情就跟往常没什么区别了。

如果你的项目已经在使用 Gulp 或 Webpack 这样的构建平台来处理 JS 的打包，那加入 CSS 的编译任务应该是轻车熟路。

除了部署之外，你可能还想知道，如何把实现 CSS 预处理语言融入到日常的开发流程中？比如说，如何做到修改源码时的自动触发编译，如何在浏览器中调试预处理语言写出的样式……

这些问题已经超出本文的范畴了。当你尝到 CSS 预处理器的甜头之后，接下来的事情即使要费些脑筋，你也一定会有足够的勇气和热情去克服。别担心，我们下次再聊！