1. 看似天仙，实则被贬
简单的HTML语言，html + css 就能展现出漂亮的静态web网页了，使用起来也十分简单，就是写一些属性以及属性值。
但是，随着项目复杂度增加以及代码体量的增大，用起来简单的 css 却出现了大量的缺陷。
- 无法模块化
无法模块化将会导致非常多的问题，如（1）命名依赖，想尽一切办法避免同名；（2）代码量大且杂乱，不能很好的分模块开发、维护、测试；（3）无法复用，没有模块化最大的问题就是工程开发时不能复用，开发程序讲究能简单就简单 - 没有变量
所谓的编程语言，不说有函数，至少也得有变量吧，哈哈，没有！没有变量最大的问题就是，当 UI 小姐姐说项目主题换个颜色吧， GG了， 难道一个一个颜色的去更改吗？ - 嵌套问题，等等
这里需要讲一下css中的 @import, CSS 的 @import 规则是可以在一个 css 文件导入其他 css 文件，但这种方式是在执行到时才能触发浏览器去加载 import 来的 css 文件，导致页面加载起来特别慢，还不如直接在在头部引用来的快。
2. sass 特性一：嵌套写法
原生css写法， 不仅写起来麻烦复杂，无法复用，看起来也是相当的臃肿
.container .leftItem {
color: dimgray;
}
.container .leftItem .resource {
color: firebrick;
}
.container .leftItem .resource .name {
color: deepskyblue;
}
sass嵌套写法， 结构明朗，层层嵌套，减少了大量冗余重复的选择器编码
.container {
.leftItem {
color: dimgray;
.resource {
color: firebrick;
.name {
color: deepskyblue;
}
}
}
}
3. sass 特性二：变量 “出场”
基本称得上语言的，变量都是必不可少的，可 css， 没有， 再次证明 CSS 可能是一门假语言。 Sass 补上了这个短板。
没有变量之前的代码（页面主体颜色），假设整个项目共有1000个地方设置了这种颜色，当 UI 小姐姐说改颜色你怎么办， 全项目替换吗？ 那替换错误咋办？？下面是css写法
.container .leftItem {
color: #8833ee;
}
.resource {
color: #8833ee;
}
.name {
color: #8833ee;
}
#glass {
color: #8833ee;
}
sass 添加变量后，是不是简单快捷方便多了！！
$theme: #8833ee
.container {
.leftItem {
color: $theme;
}
}
.resource {
color: $theme;
}
.name {
color: $theme;
}
#glass {
color: $theme;
}
使用变量后
- 多人协同时将频繁使用的属性值定义成变量放在单独的config里并注释，直接便可以引用；
- 极大地增强了代码的可维护性，便于局部和全局的样式风格统一控制；
4. sass 特性三：文件模块化
模块化的开发，就是通过将一个大型复杂的工程拆解成一个个的小模块，使得校验、调试、测试都轻而易举。
Sass 对 css 中的@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 中引入其他三个scss文件
/* site.scss */
@import "common";
@import "popup";
@import "module_a";
然后再主文件中只需要引入site.scss文件即可
5. sass 特性四：复用 ‘混合指令’
混合 (mixin) 指令特别类似于 JavaScript 中的函数，就是在这个指令中包含了一些样式，当调用这个指令时就返回其中的样式，就是把复用的样式打包起来了。
比如下面一段存在重复样式的代码。
.description{
color: red;
border: 1px solid #e3e3e3;
border-radius: 2px;
}
.article{
color: #444;
border: 1px solid #e3e3e3;
border-radius: 2px;
}
稍作优化：
.description, .article{
border: 1px solid #e3e3e3;
border-radius: 2px;
}
.description{
color: red;
}
.article{
color: #444;
}
似乎不错，但是之后再新加类似样式时，
.description, .article, .style01, .style02{
border: 1px solid #e3e3e3;
border-radius: 2px;
}
.
.
.
.style01{
}
.style02{
}
每次都要改两个地方，很麻烦，很容易漏，尤其是将通用样式分离出来的话更容易出错。
再做优化：
.grey-border-radius{
border: 1px solid #e3e3e3;
border-radius: 2px;
}
.description{
color: red;
}
.article{
color: #444;
}
似乎好了一点，但这样的话，html 每个使用的标签都需要多加上一个 .grey-border-radius 类。很显然这是多余的。这种做法可以说是“凑合”。
使用 Sass 复用之后：
@mixin grey-border-radius{
border: 1px solid #e3e3e3;
border-radius: 2px;
}
.description{
@include grey-border-radius;
color: red;
}
.article{
@include grey-border-radius;
color: #444;
}
编译后的 css 输出：
.description {
border: 1px solid #e3e3e3;
border-radius: 2px;
color: red;
}
.article {
border: 1px solid #e3e3e3;
border-radius: 2px;
color: #444;
}
这样做其实就相当于把公共样式封装起来了，用的时候调用就可以了。
SASS其实还有很多很多的功能，但是最常用的就是这四大特性，其实一般工程只要掌握这四大特性就足够了，相对于复杂的功能一般不在css中实现，过犹不及，事缓则圆，此为中庸之道。
感兴趣的可以点击查看更多特性和功能