进阶篇4. SASS
在上一节中我们演示了使用gulp来编译sass文件，接下来，我们来介绍一下sass。如果你还不会sass，是时候补课了，如果已经熟悉，可以跳过。
sass是一个用来快速编写css文件的语言。经过编译之后的sass文件就是我们通常所说的样式表css。
sass的好处我就不多说了，如果你是一个前端，css已经熟练了，你就应该在sass、less和stylus中挑一个学习，这是必须的；如果你对自己的定位不是前端，或者前端在你掌握的技能中没那么重要的话，sass就可有可无了。
sass 有两种后缀名文件：一种后缀名为 sass，不使用大括号和分号，这是最初的版本；另一种就是我们这里使用的 scss 文件，这种和我们平时写的 css 文件格式差不多，使用大括号和分号。
第一种方式由于不那么容易被习惯了写css的前端们所接受，因此，又出了后一个版本。这才使得sass的使用量逐渐超过less。不过，如果你喜欢用less也是可以的。现在两者的区别可能只是用sass的人多一些（社区大一些），用less的人少一些。
Sass的重要概念
1. 变量
在sass中用美元符$声明变量，在变量名称的后面用冒号隔开属性值和分号，然后可以在其他地方使用这个变量。如：
sass代码：
$blue: #3bbfce;
$width: 100px;
.main{
color: $blue;
width: $width;
}
.footer {
width: $width / 2; /*SASS允许在代码中使用算式 */
}
编译后的css代码：
.main{
color: #3bbfce;
width: 100px;
}
.footer {
width: 50px;
}
2. 嵌套
sass允许你嵌套选择器，以此来表示选择器之间的层级关系，从而避免了重复劳动。比如：
#navigation #main-menu ul {
background: #e5e5e5;
border: 1px solid #e2e2e2;
li {
padding: 5px 10px 5px 10px;
&:hover { /*在嵌套的代码块内，可以使用&引用父元素。*/
background: #ccc;
a {
color: #fff;
}
}
a {
text-decoration: none;
text-shadow: 1px 2px rgb(211, 200, 200);
}
}
}
编译后的css代码：
#navigation #main-menu ul {
background: #e5e5e5;
border: 1px solid #e2e2e2;
}
#navigation #main-menu ul li {
padding: 5px 10px 5px 10px;
}
#navigation #main-menu ul li:hover {
background: #ccc;
}
#navigation #main-menu ul li:hover a {
color: #fff;
}
#navigation #main-menu ul li a {
text-decoration: none;
text-shadow: 1px 2px #d3c8c8;
}
除了选择器之外，还可以嵌套属性，比如：
p {
border: {
color: red;
radius: 5px;
}
}
编译后的css代码：
p {
border-color:red;
border-radius:5px;
}
3. 继承
sass中允许使用@extend继承某个选择器的属性，比如：
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1; /* 继承class1 */
font-size:120%;
}
编译后的css代码：
.class1,.class2 {
border:1px solid #ddd
}
.class2 {
font-size:120%
}
4. Mixin
Mixin比变量更强大，它可以让你重复使用一段css代码、一组属性或者一组选择器，而且你可以给它设置参数。
Mixin使用@mixin标识符定义。看上去很像其他的CSS @标识符，比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。
Mixin中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性，如下代码:
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
当一个包含css规则的Mixin通过@include包含在一个父规则中时，在Mixin中的规则最终会生成父规则中的嵌套规则。举个例子，看看下边的sass代码，这个例子中使用了no-bullets这个Mixin：
ul.plain {
color: #444;
@include no-bullets;
}
sass的@include指令会将引入Mixin的那行代码替换成Mixin里边的内容。最终，上边的例子如下代码:
ul.plain {
color: #444;
list-style: none;
}
ul.plain li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
Mixin还可以有参数，在使用@include Mixin的时候传递参数：
@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px);
}
编译后的css代码：
#data {
float: left;
margin-left: 10px;
}
@content可以使 @mixin接受一整块样式：
@mixin max-screen($res){
@media only screen and ( max-width: $res )
{
@content;
}
}
@include max-screen(480px) {
body { color: red }
}
编译后的css代码：
@media only screen and (max-width: 480px) {
body { color: red }
}
5. 导入 import
sass的导入( @import)规则和CSS的有所不同，编译时会将 @import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如 @import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以 @import方式存在。
所有的sass导入文件都可以忽略后缀名 .scss。一般来说基础的文件命名方法以开头，如 mixin.scss。这种文件在导入的时候可以不写下划线，可写成 @import "mixin"。
//a.scss
//-------------------------------
body {
background: #eee;
}
需要导入样式的sass文件b.scss：
@import "reset.css";
@import "a";
p{
background: #0982c1;
}
转译出来的b.css样式：
@import "reset.css";
body {
background: #eee;
}
p{
background: #0982c1;
}
根据上面的代码可以看出，b.scss编译后，reset.css继续保持import的方式，而a.scss则被整合进来了。
和前面的4个基本概念相比，第5点“导入”本身其实并不算是一个基本概念。但是它为我们提供了一个非常重要的作用——能让我们用模块化的思路去整理我们的Sass文件。
在没有sass和less的日子里，我们不得不把css代码写在很少的几个文件里，因为我们不可能在网站上载入几十个css文件，这样会导致网站加载速度过慢。维持css只有少数的几个文件，速度虽然快了，但是每个文件都会包含非常多的代码，这些代码控制着很多不同对象的样式，以至于css的维护成本会比较高，随着网站的不断升级和内容的增加，css的维护成本也会增加。
模块化css以后我们会具体讲，这里只说一下它的基本思路，就是把页面元素分成小的单元，然后每一个单元的样式放在一个文件中。这样可维护性就增强了。然后经过sass编译之后，将几十甚至上百个小的sass文件编译成几个大的css文件。再交付给生产环境使用。从而即保证了速度又保持了样式表的可维护性。
为了将不同的多个sass文件组合成一个大的css文件，导入@import在此起到了关键性的作用。因此，我们在最后单独提一下。
实践
@mixin medium-up {
@media screen and (min-width: 768px) {
@content;
}
}
@mixin large-up {
@media screen and (min-width: 1024px) {
@content;
}
}
.login {
background: #fff;
width: 300px;
margin: 40px auto;
padding: 20px;
@include medium-up{
width: 600px;
height: 200px;
}
@include large-up{
width: 1000px;
}
}
以上是我们经常用来处理响应式页面中的代码。先定义两个mixin，它们对应的是两个不同的视口尺寸，然后用@content来接收调用mixin的元素的一整套样式。
以上代码会生成怎样的css代码，这里留给读者自己来实践。
这里要说的是这样做的好处——这当然还是代码可维护性方面的好处。使用这里的方法和思路，允许我们在为每个元素写默认样式的同时，就立刻定义它在各种尺寸屏幕下的优化样式。传统的方式下，默认样式写在一起，手机尺寸的样式写在一起，排版尺寸的样式写在一起，为了修改一个元素的样式，要在不同的css文件和不同的位置上来回切换。两者孰优孰劣一目了然。
总结
以上是sass的一些基本概念，但不是全部。和css一样，概念都不难，但是要熟练掌握sass，必须大量的写代码，在实践中不断积累经验才能理解它的精髓。作为经验丰富的前端，在实际工作中，你应该能灵活熟练的运用上面这些概念；作为初学者，你可能不会使用太多Mixin，但是应该至少能够看懂Mixin，其余的几个概念则应该没什么大的难度。
更深入的学习SASS，请阅读w3cplus为我们带来的精彩内容。