SASS 入门笔记

参考资料：

• SASS 用法指南
• SASS 语法
• Sass Basics
• SASS_REFERENCE

sass 有两种后缀名文件：一种后缀名为 sass，不使用大括号和分号；另一种就是我们这里使用的 scss 文件，这种和我们平时写的 css 文件格式差不多，使用大括号和分号。

关于 sass 的编译，采用 gulp + gulp-sass + browser-sync 的组合，详见 Gulp 常用插件 一文中「热重载」一节。

基本用法

变量

SASS 允许使用变量，所有的变量以 $ 开头，用过 PHP 的同学会很熟悉。

值得注意的是，SASS 中的变量通常都不需要加引号，如果加了引号，则生成的 CSS 也带引号，如果没有引号，则生成的 CSS 也没有引号。（还需后续实战总结）

$borderRadius: 30px;

div.main {
  height: 100px;
  width: 100px;
  background-color: black;
  border-radius: $borderRadius;
}

如果变量需要镶嵌在字符串之中，就需要写在 #{} 之中。

$side: left;
$borderRadius: 30px;

div.main {
  height: 100px;
  width: 100px;
  background-color: black;
  border-top-#{$side}-radius: $borderRadius;
}

除了普通变量外，SASS 还支持 list 类型和 map 类型，list 类型有点像 JavaScript 中的数组，而 map 类型有点像 JavaScript 中的对象。

list 类型可通过空格，逗号，或者小括号分隔多个值，可用 nth($var, $index) 取值。其他函数请参考 sass Functions（搜索 list functions）

map 类型以 key-value 键值对出现，其中 value 又可以是 list 类型。格式为 $map: (key1: value1, key2: value2)，可通过 map-get($map, $key) 取值。其他函数请参考 sass Functions（搜索 map functions）

计算功能

SASS 允许在代码中使用算式。

$base: 30px;

div.main {
  height: 100px;
  width: 100px;
  background-color: black;
  border-top-left-radius: 10px + 20px;
  border-top-right-radius: $base * 2;
  border-bottom-left-radius: (100px / 2);
  border-bottom-right-radius: 50px - 40px;
}

注意运算时单位（比如 px）要紧跟着数字，不能 (10+20)px，会被解析成 30 px（数字和单位中间会有个空格）

嵌套

SASS 允许选择器嵌套。比如下面的 CSS 代码：

div.main h1 {
  color: red;
}

可以写成：

div.main {
  h1 {
    color: red;
  }
}

属性也可以嵌套：

div.main {
  height: 100px;
  width: 100px;
  // background-color: red;
  // 等价于下面的代码
  background: {
    color: red;
  }
}

和选择器嵌套不同的是，这里要注意 background 后必须加上冒号。

在嵌套的代码块内，可以使用 & 引用父元素，在写伪类的时候比较常用：

a {
  color: red;
  &:hover {
    color: black;
  }
}

.post {
  font-size: 1em;
  &-head {
    font-size: 1.8em;
  }
}

注释

SASS 共有两种注释风格。

标准的 CSS 注释 /* comment */ ，会保留到编译后的文件。

单行注释 // comment，只保留在 SASS 源文件中，编译后被省略。

在 /* 后面加一个感叹号，表示这是 "重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*!
　重要注释！
*/

@at-root

Sass3.3.0 中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。

// sass style
.content {
  @at-root #{&}-header {
    color: red;
  }
  @at-root #{&}-content {
    color: blue;
  }
}
 
// css style
.content-header {
  color: red;
}
.content-content {
  color: blue;
}

代码复用

继承

SASS 允许一个选择器，继承另一个选择器。

div.first {
  height: 100px;
  width: 100px;
  background-color: green;
}

div.second {
  @extend div.first;
  border: {
    color: red;
    width: 10px;
    style: solid;
  }
}

也就是说，某个选择器可以继承另一个选择器的所有样式，并在它的基础上添加样式。

占位选择器 %

这里我们得强势插入占位选择器 %，配合 @entend 风味更佳。从 Sass 3.2.0 以后就可以定义占位选择器 %。这种选择器的优势在于：如果不调用则不会有任何多余的 css 文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了 @extend 去继承相应的样式，都会解析出来所有的样式。占位选择器以 % 标识定义，通过 @extend 调用。

比如这段代码：

.base {
  height: 100px;
  width: 100px;
  background-color: green;
}

div.second {
  @extend .base;
  border: {
    color: red;
    width: 10px;
    style: solid;
  }
}

编译的结果是：

.base, div.second {
  height: 100px;
  width: 100px;
  background-color: green; 
}

div.second {
  border-color: red;
  border-width: 10px;
  border-style: solid;
 }

但是 .base 这个类实际并没有用到，我们不希望它在样式表中，可以用占位选择器：

%base {
  height: 100px;
  width: 100px;
  background-color: green;
}

div.second {
  @extend %base;
  border: {
    color: red;
    width: 10px;
    style: solid;
  }
}

这时我们再看生成的样式表：

div.second {
  height: 100px;
  width: 100px;
  background-color: green; 
}

div.second {
  border-color: red;
  border-width: 10px;
  border-style: solid; 
}

Mixin

还是上面的例子，有两个 div，它们有一些基础样式，但是又不能用继承关系，这时就可以用 Mixin 定义可以复用的代码块。

使用 @mixin 命令，定义一个代码块。

@mixin divBase {
  width: 100px;
  height: 100px;
}

使用 @include 命令，调用这个 mixin。

div.first {
  @include divBase;
  background-color: green;
}

div.second {
  @include divBase;
  background-color: red;
}

其实这个例子举的不好，用 @extend 也能实现，但是mixin 的强大之处，在于可以指定参数和缺省值。

@mixin divBase($width: 100px, $height: 100px) {
  width: $width;
  height: $height;
}

div.first {
  @include divBase;
  background-color: green;
}

div.second {
  @include divBase(20px, 50px);
  background-color: red;
}

颜色函数

SASS 提供了一些内置的颜色函数，以便生成系列颜色。

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

插入文件

@import 命令，用来插入外部文件（.scss 和 .css 的后缀可以省略）。

@import 'b.scss';
@import 'c.css';

高级用法

条件语句

@if 以及 @else 以及 @else if 命令：

div.second {
  width: 100px;
  height: 100px;
  @if (1 + 1 != 2) {
    background-color: red;
  } @else {
    background: {
      color: black;
    }
  }
}

注意 SASS 中只有 == 、!= 没有 ===。

循环语句

循环语句我觉得是 SASS 中最好用的功能，让我觉得 SASS 真的是一种 "编程语言"。

比如有一张雪碧图，如果仅仅用 CSS，我们可能会写出如下 "又臭又长" 的代码：

div.bg_1 {
  float: left;
  width: 50px;
  height: 50px;
  background-image: url(bg.jpg);
  background-position: 0 0;
}

div.bg_2 {
  float: left;
  width: 50px;
  height: 50px;
  background-image: url(bg.jpg);
  background-position: -50px 0;
}

div.bg_3 {
  float: left;
  width: 50px;
  height: 50px;
  background-image: url(bg.jpg);
  background-position: -100px 0;
}

我们先用 SASS 的 Mixin 复用一些代码（用 @extend 也可以）：

@mixin divBase {
  float: left;
  width: 50px;
  height: 50px;
  background-image: url(bg.jpg);
}

div.bg_1 {
  @include divBase;
  background-position: 0 0;
}

div.bg_2 {
  @include divBase;
  background-position: -50px 0;
}

div.bg_3 {
  @include divBase;
  background-position: -100px 0;
}

接着我们就来用循环语句进一步精简代码。

SASS 支持 for 循环：

@mixin divBase {
  float: left;
  width: 50px;
  height: 50px;
  background-image: url(bg.jpg);
}

@for $i from 1 to 4 {  // [1, 4)
  div.bg_#{$i} {
    @include divBase;
    background-position: -50px * ($i - 1) 0;
  }
}

我们注意下上面的循环次数，是 [1, 4)，如果想要 [1, 4]，则要用 through 关键字：

@for $i from 1 through 4 {  // [1, 4]
  div.bg_#{$i} {
    @include divBase;
    background-position: -50px * ($i - 1) 0;
  }
}

支持 while 循环：

@mixin divBase {
  float: left;
  width: 50px;
  height: 50px;
  background-image: url(bg.jpg);
}

$i: 1;

@while $i < 4 {
  div.bg_#{$i} {
    @include divBase;
    background-position: -50px * ($i - 1) 0;
  }
  $i: $i + 1;
}

我们还可以用 each，语法为 @each $var in <list or map>

@each $i in (1, 2, 3) {
  div.bg_#{$i} {
    @include divBase;
    background-position: -50px * ($i - 1) 0;
  }
}

我们可以把 (1, 2, 3) 抽象为一个变量，有点 JavaScript 中数组的意思，这样更灵活，这样数字不一定是等比数列，适用范围就更广了。我喜欢 each！

$num: (1, 2, 3);

@each $i in $num {
  div.bg_#{$i} {
    @include divBase;
    background-position: -50px * ($i - 1) 0;
  }
}

自定义函数

@function double($n) {
  @return $n * 2;
}

div.second {
  width: 100px;
  height: double(100px);
  background-color: red;
}