SASS 基础知识

同 CSS 相比，SASS 的一些额外能力都是为软件工程化服务的，因此有必要加以了解。

可以定义和使用变量：

$main-fonts: Arial, sans-serif;
$headings-color: green;

h1 {
  font-family: $main-fonts;
  color: $headings-color;
}

可以嵌套定义选择器规则：

/* css 的原始方式：*/
nav {
  background-color: red;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}

/*sass 的方式： */

nav {
  background-color: red;

  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

可以通过 mixin 创建可重用的 CSS，mixin 在 SASS 中就是一组可重用的 CSS 规则，并且支持传参：

@mixin box-shadow($x, $y, $blur, $c){ 
  -webkit-box-shadow: $x $y $blur $c;
  -moz-box-shadow: $x $y $blur $c;
  -ms-box-shadow: $x $y $blur $c;
  box-shadow: $x $y $blur $c;
}
/*这样在不同的位置都可以引用这个 mixin 而不用重复写*/

div {
  @include box-shadow(0px, 0px, 4px, #fff);
}

.textContainer {
  @include box-shadow(0px, 1px, 5px, #fff);
}

在 SASS 中支持逻辑判断：

@mixin make-bold($condition) {
  @if $condition == true {
    font-weight: bold;
  }
}

@mixin text-effect($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == alert {
    color: yellow;
  }
  @else if $val == success {
    color: green;
  }
  @else {
    color: black;
  }
}

可以使用循环：

/* 普通 for 循环 */
@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}

/* for each 方式 */
@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}

/* 定义一个字典变量后再循环 */
$colors: (color1: blue, color2: red, color3: green);
@each $key, $color in $colors {
  .#{$color}-text { 
      color: $color; 
  }
}

/* while 循环 */
$x: 1;
@while $x < 13 {
  .col-#{$x} { 
      width: 100%/12 * $x;
  }
  $x: $x + 1;
}

/* 这样在比如 H1 到 H6 的 font-size 赋值上就非常方便了 */

可以将自定义的 Style 划分到多个 partial 中，SASS 中的 Partial 是可被其他文件引用的一类特殊文件。Partial 的文件名以 _ 开头，扩展名为 .scss，要引入另外一个 Partial，可以使用 @import，比如有个 Partial 文件名为 _mixins.scss，想在 main.scss 中使用，则可以：@import 'mixins'，当引入后，Partial 中的所有变量，mixin 和其他代码都可以在引用者文件中使用。

可以对另外一个 selector 进行继承操作，这样样式的覆盖就非常明显和可控了：

.panel{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}

/* 继承后覆盖一些样式 */
.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}