记得刚遇见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 文件，导致页面加载起来特别慢，还不如直接在 <head> 里写一大坨 <link> 标签的引入效率高，是名副其实的鸡肋功能，演员一般的存在，用你一次算我输。
有需求就会有市场，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;
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。