Sass 语法小结

本文主要对 Sass 的基本语法进行了小结，方便日后快速查阅使用。

一、变量（$）

1. 变量标识符

Sass 使用 $ 符号来标识变量。

$highlight-color: #abcdef;
.selected {
     border: 1px $highlight-color solid;
}

2. 重复引用

在声明变量时，变量值也可以引用其它变量。

$highlight-color: #abcdef;
$highlight-border: 1px $highlight-color solid;
.selected {
     border: $highlight-border;
}

二、嵌套

1. 基本嵌套

在一个规则块中，既可以像普通的 CSS 那样包含属性，又可以嵌套其它规则块。

#content {
     background-color: #f5f5f5;
     aside { 
         background-color: #eee; 
     }
}

2. 父选择器的标识符 &

一是用来解决类似 :hover 这样的伪类选择器，二是可以再父选择器之前添加选择器。

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

#content aside {
     color: red;
     .feed & {
         color: green;
     }
}

3. 群组选择器

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

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

• 子组合选择器和同层组合选择器：>、+ 和 ~。

article section {     // 选择article下的所有section选择器元素
    margin: 5px;
}

article > section {     // 选择article下紧跟着的子元素section选择器元素
    border: 1px solid #ccc;
}

header + p {             // 选择与header元素同层的p元素
    font-size: 1.1em
}

article ~ article {     // 选择所有跟article后的同层article元素
    border-top: 1px dashed #ccc
}

article {             // sass的写法，可以从选择符前断开
     ~ article { 
         border-top: 1px dashed #ccc; 
     }
     > section { 
         background: #eee; 
     }
     dl > {
          dt { 
              color: #333; 
          }
          dd { 
              color: #555; 
          }
     }
     nav + & { 
         margin-top: 0; 
     }
}

4. 嵌套属性

把属性名从中划线 - 的地方断开，在根属性后添加一个冒号 :，紧跟一个 {} 块，把子属性部分写在这个 {} 块中。

nav {     // sass
     border: {
          style: solid;
          width: 1px;
          color: #ccc;
     }
}

nav {     // css
     border-style: solid;
     border-width: 1px;
     border-color: #ccc;
}

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

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

三、导入

1. @import规则

• CSS 有一个特别不常用的特性，即 @import 规则，它允许在一个 CSS 文件中导入其它 CSS 文件。然而，后果是只有执行到 @import 语句时，浏览器才会去下载其它 CSS 文件，这导致页面加载起来特别慢。

• Sass 也有一个 @import 规则，但不同的是，Sass 的 @import 规则在生成 CSS 文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个 CSS 文件中，而无需发起额外的下载请求。

• 所有在被导入文件中定义的变量和混合器均可在导入文件中使用。

• 使用 Sass 的 @import 规则并不需要指明被导入文件的全名，你可以省略 .sass、.scss文件后缀。

@import 'colors';    // colors.scss
@import 'mixins';    // mixins.scss
@import 'grid';      // grid.scss

2. 使用局部文件

• 有一些专为 @import 命令而编写的 Sass 文件，这些文件并不会编译成对应的独立 CSS 文件，这样的 Sass 文件称为 局部文件。

• 局部文件的文件名以下划线开头，如 _night-sky.scss。

• 当你想用 @import 导入局部文件时，可省略文件名前面的下划线 -，如：

@import 'themes/night-sky';    // themes/_night-sky.scss

3. 默认变量值

如果用户在导入你的局部文件之前声明了变量，那么你的局部文件中的默认变量值就无效，否则就取默认值。

$fancybox-width: 400px !default;

.fancybox {
     width: $fancybox-width;
}

4. 嵌套导入

例如，有一个名为 _blue-theme.scss的局部文件，内容为：

aside {
     background: blue;
     color: white;
}

然后把它导入到一个CSS规则内，如下所示：

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

生成的结果跟你直接在 .blue-theme 选择器内写_blue-theme.scss文件的内容完全一样：

.blue-theme {
     aside {
          background: blue;
          color: #fff;
     }
}

5. 原生的 CSS 导入

由于 Sass 兼容原生的 CSS，所以它也只支持原生的 CSS @import，下列三种情况都生成原生的 CSS import：

• 被导入的文件以 .css 结尾；

• 被导入文件的名字是一个 URL 地址，比如：比如http://sass-lang.com/styleshe...）；

• 被导入文件的名字是 CSS 的 url() 值。

另外，因为 Sass 的语法完全兼容 CSS，所以可以把原始的 CSS 文件改名为 .scss 后缀，即可直接导入了。

四、注释

1. 静默注释

body {
     color: #333; // 这种注释内容不会出现在生成的css文件中（静默注释）
     padding: 0;  /* 这种注释内容会出现在生成的css文件中 */
}

五、混合器

1. 定义与使用

• 如果你的整个网站中有几处小小的样式重复（例如一样的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择（小颗粒度）。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，那么独立的变量就没有办法应付这种情况，这时候你可以通过 Sass 的混合器（@mixin）来实现大段样式的重用（大颗粒度）。

• 混合器使用 @mixin 标识符定义，然后通过 @include 来使用这个混合器。

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

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

.notice {     // 最后生成
     background-color: green;
     border: 2px solid #00aa00;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
}

2. 使用场景

判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的名字来描述这些属性修饰的样式，比如 rounded-corners、fancy-font 或者 no-bullets，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适（避免滥用）。

3. 混合器中的 CSS 规则

混合器不仅可以包含属性，还可以包含 CSS 规则，包含选择器和选择器中的属性。

@mixin no-bullets {     // @mixin 定义
     list-style: none;
     li {
          list-style-image: none;
          list-style-type: none;
          margin-left: 0px;
     }
}

ul.plain {    // @include 调用
     color: #444;
     @include no-bullets;
}

ul.plain {     // 最终生成
     color: #444;
     list-style: none;
}
ul.plain li {
     list-style-image: none;
     list-style-type: none;
     margin-left: 0px;
}

4. 给混合器传参

• 混合器并不一定总得生成相同的样式，可以通过在调用 @include 时传参来定制混合器生成的精确样式（跟 JavaScript 的 function 很像）。

@mixin link-colors($normal, $hover, $visited) { // @mixin 定义
     color: $normal;
     &:hover { 
         color: $hover; 
     }
     &:visited { 
         color: $visited; 
     }
}

a {    // @include 调用
    @include link-colors {blue, red, green};
}

a { color:blue; }    // 最终生成
a:hover { color:red; }
a:visited {color:green; }

• 当你使用 @include 调用混合器时，有时候可能会很难区分每个参数是什么意思或者参数之间是一个怎么的顺序。为了解决这个问题，Sass 允许通过语法 $name: value 的形式指定每个参数的值。这种形式的传参，参数顺序什么的就不必在乎了，只需要没有漏掉参数即可。

a {    //  传参
     @include link-colors(
          $normal: blue,
          $visited: green,
          $hover: red
     );
}

• 为了在 @include 调用混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用 $name: default-value 的声明形式。默认值可以是任何有效的 CSS 属性值，甚至是其它参数的引用。

@mixin link-colors(     // 使用默认参数值
     $normal,
     $hover: $normal,
     $visited: $normal
) {
     color: $normal;
     &:hover { color: $hover; }
     &:visited { color: $visited; }
}

六、继承

1. 定义和使用

sass中，选择器继承可以让选择器 继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词 @extend，后面紧跟需要继承的选择器。

h1{    // sass
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

h1,.speaker{    // css
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

后记

Sass 功能丰富、强大，上面的语法小结只是其中的一小部分。任何你想提高 CSS 代码编写效率的方法仿佛都能在 Sass 中找到。掌握 Sass 的使用应该成为现代前端开发的一项必备技能，尤其是那些大型的、复杂的 Web 项目。

参考资料

• Sass 与 Compass 实战