Sass

如果你用了打包工具，比如Gulp、Webpack，又需要写比较多的样式的话，那用Sass来写CSS才是最好不过的。 相比较CSS，Sass能提供很多CSS无法达到的优越性。sass的出现，让前段样式写起来更有结构。各种原因就是，CSS那么难用你怎么还在用CSS。

Sass让前端样式拥有了变量

CSS本身是缺少变量机制的，像每个网站都有自己的主色，如果没有变量的话，只写CSS，每次都只能拷贝颜色六位数，但有了变量就不一样了。就是在Sass底下。

在Sass下，你可以把某段重复使用的CSS属性值定义成变量，然后通过变量名来引用它们，这样可以避免你对某一变量名的重复书写，当然，你也可以只是给这段属性起一个让人一看就懂的名字。

使用时，只要对变量进行声明和引用即可，需要注意的一点是，在Sass中符号中划线和下划线是相同的。即a_b和a-b是相同的。 下一段例子是写在Sass官方网站上的：

$nav-color: #90;
nav {	
        $width: 100px;	
        width: $width;	
        color: $nav-color;
}

Sass可以解决CSS的无层级嵌套

同样的代码，Sass可以在书写时将次级元素嵌套在上一级元素之间。下面的例子同样来自官网。

在CSS上，你可能需要这样写

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

而Sass写法

#content {
  article {
      h1 { color: #333 }
      p { margin-bottom: 1.4em }
 }  aside { background-color: #EEE }
}
      

这种嵌套写法是让我第一次见到sass就爱上它的主要原因之一。它让样式写起来也变得层级分明。这是很有趣的写法。

@import

当然CSS也有@import,它可以让一个CSS文件在文件内导入其他CSS文件，但是这样会导致只有页面执行到import的时候，浏览器它才会去获取另外的CSS文件，这个操作会导致页面加载缓慢。

Scss的@import使Sass在生成CSS文件的时候，就把相关文件导入了，所以再加载页面的时候就无需发起额外的下载请求了。