上一篇写了关于 BEM 规范，现在来说一下 SASS，有了它你写 CSS 的逼格会更高一级，写起来也会更加的得心应手。

官方地址：http://sass-lang.com/

中文版：Sass 中文网

sass 有一个类似于 jQuery 之于 javascript 的库，叫做 compass，现在很少有人在用，都是配合 postCSS在使用，这里提一下。

看一下 SASS 就会发现，它也是一个比较强大而又有点复杂的工具，但是对于很多人来说，日常用到的基本只是一些简单的规则，所以这里就不对高级用法进行介绍了，只讲讲基本用法。

变量

你可以把一些反复使用的 CSS 属性定义成变量，在使用的时候直接引用即可，不用再写一遍。值得注意的是，变量只能在它的作用域范围内使用，不能超出范围。

$nav-color: #F90;//可以在整个文档范围内使用
nav {
  $width: 100px;
  width: $width;//只能在 .nav 范围内使用
  color: $nav-color;
}

变量命名时，连字符和下划线通用，视为同等规则。

嵌套

子元素的样式可以直接写在父元素样式内部，包括群组选择器，甚至是属性都可以嵌套，而不需重复定义。

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

群组选择器嵌套：

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

组合选择器嵌套：

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

属性嵌套：

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

对于伪类和伪元素，用父元素标识符&

article a {
  color: blue;
  &:hover { color: red }
}

导入CSS 文件

sass 允许使用 @import 规则将不同的 sass 文件导入进来，如果不想生成独立的 CSS 文件，可以使用 _前缀来命名 sass 文件。

导入规则可以是在文件开头，也可以是在表达式内部，例如：

.blue-theme {@import "blue-theme"}

常用方法是将一些独立的样式进行分离到不同的文件中，需要使用的时候再进入进来。

mixin 混合器

混合器适用于大段的重复使用同一段规则，通过 @mixin 进行定义，通过 @include 来进行使用这个规则。

定义：

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

使用：

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

混合器内部还可以定义 CSS 规则。

继承

这里的继承是指通过 @extend 方法来继承样式。

.error {
  border: 1px red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

正确使用混合器和继承

混合器和继承虽然很强大，但是如果使用混乱的话，生成的 CSS 文件会非常复杂庞大，这就失去了优雅，所以知道什么时候使用才好。

1. 混合器
   应该能够给混合器一个合理的语义化的命名，例如：rounded-corners，混合器也主要用于展示型样式的复用。

2. 继承
   当一个元素拥有的类（比如说.seriousError）表明它属于另一个类（比如说.error），这时使用继承再合适不过了。

总结

sass 确实可以减少我们的代码量，而且也避免了很多重复无意义的工作，但是如果有下一节的 postCSS加成，估计你会更加的喜欢上 CSS。