1. 继承（ @extend ）
@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。
如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。
<style lang="scss"> .contanier1{ font-size: 24px; font-weight: bold; color: green; } .contanier2{ @extend .contanier1; color: red; } .contanier3{ @extend .contanier1; font-size: 30px; } </style>
将以上代码转换为 CSS 代码，如下所示：
<style lang="scss"> .contanier1, .contanier2, .contanier3{ font-size: 24px; font-weight: bold; color: green; } .contanier2{ color: red; } .contanier3{ font-size: 30px; } </style>
使用 @extend 后，在 HTML 标签中就不需要指定多个类 class=“contanier1 contanier2” ，只需要设置 class=“contanier2” 类就可以了。
占位符 % placeholder
它可取代以前 CSS 中的基类造成的代码冗余的情形。
因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。
来看一个演示：
%fz20{ font-size: 20px; } %red{ color: red; }
这段代码没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。
只有通过 @extend 调用才会产生代码：
<div class="wrap"> <div class="contanier1"> <span class="content">contanier1</span> </div> </div> <style lang="scss"> %fz20{ font-size: 20px; } %red{ color: red; } .wrap{ @extend %fz20; @extend %red; } .contanier1{ @extend %fz20; .content{ @extend %red; } } </style>
编译出来的 CSS
.wrap, .contanier1{ font-size: 20px; } .wrap, .contanier1 .content{ color: red; }
从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。
2. 混入（ @mixin ）
混入( mixin )通过 @mixin 指令来定义。
语法： @mixin name { property: value; property: value; … }
定义 “basis-text” 的混入
@mixin basis-text{ font-size: 24px; font-weight: bold; color: green; }
注意： Scss 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin basis-text{ } 与 @mixin basis-text{ } 是一样的混入。
使用 @include 命令，调用这个 mixin
语法： selector { @include mixin-name;}
调用 “basis-text” 的混入
<style lang="scss"> @mixin basis-text{ font-size: 24px; font-weight: bold; color: green; } .contanier1{ @include basis-text; } </style>
以上代码转换为 CSS 代码，如下所示：
.contanier1{ font-size: 24px; font-weight: bold; color: green; }
混入中也可以包含混入，如下所示：
@mixin contanier1 { @include basis-text; @include link; @include special-border; }
向混入传递变量
定义可接收参数的混入：
<style lang="scss"> @mixin basis-text($width,$color){ font-size: 20px; color: green; border: $width solid $color; } .contanier1{ @include basis-text(2px,red); } .contanier2{ @include basis-text(5px,blue); } </style>
以上实例的混入参数为设置边框的属性 (color 和 width) 。
将以上代码转换为 CSS 代码，如下所示：
.contanier1{ font-size: 20px; color: green; border: 2px solid red; } .contanier2{ font-size: 20px; color: green; border: 5px solid blue; }
混入的参数也可定义默认值，语法格式如下：
<style lang="scss"> @mixin basis-text($width:2px,$color:red){ font-size: 20px; color: green; border: $width solid $color; } .contanier1{ @include basis-text; } </style>
在包含混入时，只需要传递需要的变量名及其值：
<style lang="scss"> @mixin basis-text($width,$color){ font-size: 20px; border: { color: $color; width: $width; style: dashed; } } .contanier1{ @include basis-text(2px,blue); } </style>
将以上代码转换为 CSS 代码，如下所示：
.contanier1{ font-size: 20px; border-color: blue; border-width: 2px; border-style:dashed; }
可变参数
有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时就可使用 … 来设置可变参数。
如：创建盒子阴影（box-shadow）的一个混入（mixin）可采取任何数量的 box-shadow 作为参数。
@mixin box-shadow($shadows...) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows; } .shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999); }
浏览器前缀使用混入
<style lang="scss"> @mixin transform($property) { -webkit-transform: $property; -ms-transform: $property; transform: $property; } .contanier1{ @include transform(rotate(20deg)); } </style>
以上代码转换为 CSS 代码，如下所示：
.contanier1 { -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); }
3. 导入文件（ @import ）
类似 CSS，Scss 支持 @import 指令。@import 指令可以让我们导入其他文件等内容。
CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。但 Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。
Scss @import 指令语法如下：
@import filename;
注意： 包含文件时不需要指定文件后缀，Scss 会自动添加后缀 .scss。此外，也可以导入 CSS 文件。
导入后就可在主文件中使用导入文件等变量。
以下实例，导入 variables.scss、colors.scss 和 reset.scss 文件。
@import "variables"; @import "colors"; @import "reset";
创建一个 reset.scss 文件：
html, body, ul, ol { margin: 0; padding: 0; }
然后在 standard.scss 文件中使用 @import 指令导入 reset.scss 文件：
@import "reset"; body { font-family: Helvetica, sans-serif; font-size: 18px; color: red; }
以上代码转换为 CSS 代码，如下所示：
html, body, ul, ol { margin: 0; padding: 0; } body { font-family: Helvetica, sans-serif; font-size: 18px; color: red; }
Scss Partials
如果不希望将一个 Scss 的代码文件编译到一个 CSS 文件，可在文件名的开头添加一个下划线。
这将告诉 Scss 不要将其编译到 CSS 文件。但是，在导入语句中不需要添加下划线。
Scss Partials 语法格式：
_filename;
以下创建一个 _colors.scss 的文件，但是不会编译成 _colors.css 文件：
$myPink: #EE82EE; $myBlue: #4169E1; $myGreen: #8FBC8F;
如果要导入该文件，则不需要使用下划线：
@import "colors"; body { font-family: Helvetica, sans-serif; font-size: 18px; color: $myBlue; }
注意： 不要将带下划线与不带下划线的同名文件放置在同一个目录下。如：_colors.scss 和 colors.scss 不能同时存在于同一个目录下，否则带下划线的文件将会被忽略。
4. 控制指令
4.1 条件语句（ @if ）
当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：
p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; } }
编译为
p { border: 1px solid; }
@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。
如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明。例如：
@mixin txt($weight) { color: white; @if $weight == bold { font-weight: bold; } @else if $weight == light { font-weight: 100; } @else { font-weight: normal; } } .txt1 { @include txt(bold); }
编译为
.txt1 { color: white; font-weight: bold; }
4.2 循环语句
@for
@for 指令可在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。 包含两种格式：@for $var from <start> through <end>，或 @for $var from <start> to <end>； 区别： through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值， 而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。 另外，$var 可以是任何变量，如 $i；<start> 和 <end> 必须是整数值。
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }
编译为
.item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }
@while
@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。
$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }
编译为
.item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; }
@each
@each 指令的格式是 $var in <list>, $var 可以是任何变量名。如 $length 或 $name，而 <list> 是一连串的值，也就是值列表。 @each 将变量 $var 作用于值列表中的每一个项目，然后输出结果。
@each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } }
编译为
.puma-icon { background-image: url('/images/puma.png'); } .sea-slug-icon { background-image: url('/images/sea-slug.png'); } .egret-icon { background-image: url('/images/egret.png'); } .salamander-icon { background-image: url('/images/salamander.png'); }
