Sass_ 字节宝

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

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

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

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

代码语言：javascript复制


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

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

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

代码语言：javascript复制


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

而Sass写法

代码语言：javascript复制


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

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

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

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

0 人点赞