0
不想错过更多好文?请点击上面的 “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 预处理器的甜头之后,接下来的事情即使要费些脑筋,你也一定会有足够的勇气和热情去克服。别担心,我们下次再聊!


相关链接

转自:https://mp.weixin.qq.com/s/FVQaS66CxzP3KpGrwUtnsQ
关闭 返回顶部
联系我们
Copyright © 2011. 聚财吧. All rights reserved.