sass让人们受益的一个重要特性就是它为 css 引入了变量。你可以把反复使用的 css 属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途

sass使用$符号来标识变量

css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个ID

<div id="content">
  <article>
    <h1>标题</h1>
    <p>文字</p>
  </article>
  <aside>边</aside>
</div>

导入 Sass 文件

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

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

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

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

使用sass的时候，最后一个减少重复的主要特性就是选择器继承。选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现

.error {
  border: 1px solid red;
  background-color: #fdd;
}

.seriousError {
  @extend .error;
  border-width: 3px;
}

Sass 支持数字的加减乘除等运算 (+, -, *, /)，如果必要会在不同单位间转换值

$size: 1000px;
.root {
  width: $size + 200px;
}
.root1 {
  width: $size - 200px;
}
.root2 {
  width: $size * 2;
}
.root3 {
  width: ($size / 2);
}
.root4 {
  width: ($size - 400) * 2;
}

Sass提供了一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用到

@if

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码