前端必备技能：CSS 预处理工具 Stylus 详解

前言

CSS 面世已经超过20年，回顾 CSS 的历史，CSS-Tricks 站长 Chris Coyier 总结了 五个里程碑事件：

1. Firebug
2. Chrome
3. CSS3
4. 预处理
5. Flexbox & Grid

这次分享的就是第四个里程碑：预处理。CSS 是一种标记语言，它本身的可编程性很差，没有变量、没有逻辑判断、没有循环、没有模块管理，要用多少就得写多少，非常不利于后期维护和团队协作。另外，浏览器环境复杂多变，兼容性一直也是 CSS 的大问题，前端开发人员不得不不断挖掘学习各种稀奇古怪的 Hack 技术。

等到预处理工具出现，这些问题终于有了改观。开发人员不再需要直接写 CSS，通过预处理工具，可以大大减少重复性工作，也可以模块化组织代码。输出的 CSS 会自动包含各种兼容性扩展，一切都在向好的方向发展。

Stylus

本节分享会着重介绍 Stylus 的用法。相对于其它竞品，它有以下优势：

1. 基于 Node.js 开发，和其它我们熟悉的工具处于同一平台，学习成本更低
2. 支持各种级别的简写，可以无缝接入当前项目
3. 语法简单、好扩展
4. 包含丰富的内建函数

分享内容&目标

1. Stylus 的基础用法
2. Stylus 的高级用法
3. 组织你的 Stylus 代码
4. 配合其它工具使用

看完这次分享的同学，经过一些练习，可以掌握 Stylus 用法，并快速加入现有项目当中

面向受众

1. 页面制作初学者
2. 对页面制作感兴趣者