初遇 CSS，一见倾心
记得刚遇见css的时候，咱像是见了美人儿一样，简直是爱不释手啊，简简单单写几行算不上代码的代码，就能做出这么漂亮的东西，这也成了咱前端之路的最初动力。
然而，随着项目体量和页面复杂度的增加，咱很快就发现这美人儿非但不漂亮，而且缺胳膊少腿儿的：
- 缺少模块系统。模块系统是软件工程化的基石，CSS 的这个缺陷对前端项目的工程化管理造成了很大阻力，导致开发大型应用时编码和维护都异常困难。js 一开始也没有模块系统，后来各种轮子频出，什么CMD，AMD，UMD全蹦出来了，乱哄哄的，好在 ES6 从语言层面引入了模块系统才终结了这种乱象，以后 js 的模块化终于可以统一了。css 你怎么不好好向你的好基友 js 学习呢，人家都有了，你还傻了吧唧的一点动静都没有。
- 没有变量机制。这对控制多个地方会引用到的属性值很不方便。比如一个颜色值，页面好多地方用到，设计MM突然心血来潮把这个值换成了另一个颜色，咱们怎么办，ctrl+f 全局替换？万一换掉了不该换的，或者漏掉了几个怎么办。
- 嵌套的层级写法非常蛋疼。经常会出现
.page .content .left-side .profile .name{};
.page .content .left-side .profile .age{};
这种看起来很不爽，写起来更不爽的写法。这是程序员最不能忍受的——重复。 - 复用困难。复用是软件工程的核心思想，css 不仅没提供模块系统，而且巧妙地避开了工程化的诸多实践。更加觉得 css 这门语言设计的跟闹着玩儿似的。
- blabla.. 其它的都不是很严重啦。
CSS 没有模块系统，你当我 @import 是空气？
CSS 的 @import 规则是可以在一个 css 文件导入其他 css 文件，但这货需要执行到它时才能触发浏览器去下载它所 import 来的 css 文件，导致页面加载起来特别慢，还不如直接在 里写一大坨
标签的引入效率高，是名副其实的鸡肋功能，演员一般的存在，用你一次算我输。
有需求就会有市场，Sass(Syntactically Awesome Style Sheets) 应运而生。
老规矩，先来看看 Sass 官网的原话：
Sass 是世界上最成熟、最稳定、最强大的专业级 CSS 扩展语言！
这货还真是一点也不谦虚，“最成熟，最稳定，最强大”。
通过这几年项目中的实际运用，咱发现这句简短霸气的描述其实并没有丝毫的浮夸，Sass 的确厉害，完全可以 hold 住这三个“最”字，实至名归。
什么是预处理器
预处理器是在程序源文件被编译之前根据预处理指令对程序源文件进行处理的程序。说白了，预处理器只不过是一个文本替换工具而已。CSS 预处理器则是通过将有特殊语法和指令的源代码处理成浏览器可使用的 CSS 文件的程序。
是 Sass 还是 SCSS？
SCSS 是 Sass 3 引入的新语法，语法上完全兼容原生 CSS，功能上完全继承 Sass，可以说是 CSS 和 Sass 的完美融合。SCSS 之于 Sass 犹如 CSS3 之于 CSS，ES6 之于 JS。所以别纠结，其实是一个东西啦。
接下来就细数 Sass 带给咱们的四大实用特性，想必你一定已经使用过它们中的一个或几个。
一、嵌套写法
想想之前咱们是怎样写原生 css 的：
.page .content .left-side .profile .name{
font-size: 2rem;
}
.page .content .left-side .profile .age{
color: red;
}
现在使用 scss 可以这样写：
.page{
.content{
.left-side{
.profile{
.name{
font-size: 2rem;
}
.age{
color: red;
}
}
}
}
}
编译后
.page .content .left-side .profile .name{font-size: 2rem;}
.page .content .left-side .profile .age{color: red;}
这种嵌套写法的好处是显然的：
- 结构清晰简洁，并且可与 html 文档结构对应起来；
- 减少了大量冗余重复的选择器编码；
二、属性值的复用——定义变量
变量一直是所有编程语言的标准配置。然而 CSS 就没有，再次证明 CSS 可能是一门假语言。好在 Sass 补上了这个短板。
没有变量之前的代码（这里以定义一系列表示成功风格的样式组件为例）：
.success-bg{
background: #dff0d8;
}
.success-panel{
.panel-heading{
background: #dff0d8;
}
.panel-body{
border: 1px solid #dff0d8;
}
}
使用了变量后的代码：
$success-color: #dff0d8;
.success-bg{
background: $success-color;
}
.success-panel{
.panel-heading{
background: $success-color;
}
.panel-body{
border: 1px solid $success-color;
}
}
使用变量的好处是显而易见的：
- 方便了多人协同作战，将频繁使用的属性值定义成变量放在单独的文件里，各个开发人员可方便引用而不必再关注这些小细节，有语义的变量名使用起来也要比单调的CSS值容易的多；
- 极大地增强了代码的可维护性，便于局部和全局的样式风格统一控制；
三、文件级的复用——模块系统
模块化是软件工程的第一要务，是大型项目的必需建筑。软件工程的主要目标就是控制复杂度，这也正是模块化的目的。通过将一个大型复杂的工程拆解成一个个的小模块，使得校验、调试、测试都轻而易举。
CSS原生的 @import 提供了一个并没有卵用的假模块系统。Sass 对 @import 进行了拓展，实现了一个真正意义上甚至功能更强大的模块系统。Sass 选择对 @import 进行扩展，而不是新建一个指令，可见 import 这个关键字的语义之强，java script 模块系统的关键字也是 import。
没有模块系统之前：
<!-- index.html -->
<link rel="stylesheet" href="/your/site/common.css">
<link rel="stylesheet" href="/your/site/popup.css">
<link rel="stylesheet" href="/your/site/module_a.css">
<link rel="stylesheet" href="/your/site/site.css">
有了模块系统之后：
/* site.scss */
@import "common";
@import &q