本文由大漠根据Scott O’Hara的《Getting into Sass Control Directives》一文所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出：http://flippinawesome.org/2014/03/03/getting-into-sass-control-directives。
——作者：Scott O’Hara
——译者：大漠
Sass使用@extend和@mixin可以很容易编写出精简的CSS。但也许你不太清楚，如何使用Sass的控制命令帮助您更好的编写精简Sass。
使用@if、@for、@each和@while控制命令，可以让你的Sass在编写重复样式和条件逻辑时起到非常关键的作用。
@if指令的应用
在一些样式场景之下，使用@if控制命令非常有用。基本上Sass会检查@if命令，如何@if条件为真，将会编译出CSS，如果条件为假，不会编译出CSS。或者你设置一个@else命令，将会编译出另一套样式规则。
下面是一个简单的例子：
// 带有`@if`指令的Mixin
@mixin left-or-right($lr) {
position: absolute;
top: 0;
// 声明向左或向右
@if $lr == left {
left: 20px;
}
@else if $lr == right {
right: 20px;
}
}
在上面的@mixin中，通过@if控制指令根据$lr的取值输出不同的CSS规则。
// Mixin应用:
.class-name {
@include left-or-right(left);
}
在这个示例中，设置了$lr的值为left，将编译出与面的样式：
.class-name {
position: absolute;
top: 0;
left: 20px;
}
@for指令的应用
在@for命令中基本上有一个起点和一个终点。你可以通过@for指令实现从起点到终点的一个循环。
从起到到终点实现一个循环。让我们来看一个示例，更好的描述@for循环：
// 输出 .txt-h1 - 6
@for $i from 1 through 6 {
.txt-h#{$i} {
@extend %txt-h#{$i};
}
}
在上面的示例中，通过@for循环指令，生成了.txt-h1到.txt-h6类名，并在对应的类名是设置各自的字号。
生成的CSS如下：
.txt-h1 { ... }
.txt-h2 { ... }
.txt-h3 { ... }
.txt-h4 { ... }
.txt-h5 { ... }
.txt-h6 { ... }
在这个示例的基础上我们扩展一下。
@for $i from 1 through 6 {
%txt-h#{$i}{
font-size: 3em / $i;
}
}
@for $i from 1 through 6 {
.txt-h#{$i} {
@extend %txt-h#{$i};
}
}
输出的CSS如下：
.txt-h1 {
font-size: 3em; }
.txt-h2 {
font-size: 1.5em; }
.txt-h3 {
font-size: 1em; }
.txt-h4 {
font-size: 0.75em; }
.txt-h5 {
font-size: 0.6em; }
.txt-h6 {
font-size: 0.5em; }
如果你修改through的值，将会输出不同的样式：
.txt-h1 { ... }
.txt-h2 { ... }
.txt-h3 { ... }
.txt-h4 { ... }
.txt-h5 { ... }
每种@for指令都有其使用情况，你只要确保你记住了输出的指令。
@each指令的应用
@each循环是通过遍历变量的列表，生成不同的CSS。如果你不熟悉Sass的列表，你可以阅读Hugo Giraudel的文章——这里介绍的很详细。
如果你阅读英文吃力，建议你阅读《理解Sass的list》一文，可以帮助你理解Sass中的列表。——@大漠
通过引用变量列表，@each指令可以根据列表中的变量生成指定的代码。
一个简单的示例，实现了文本对齐的方式：
$align-list: center, left, right;
@each $align in $align-list {
.txt-#{$align} {
text-align: $align;
}
}
在这里设置了一个类名和对齐方式值的变量列表。然后通过@each指令，和一个新的变量$align，并且在$align-list变量列表中遍历，直到遍历完成。
上面的SCSS将编译出的CSS如下：
.txt-center {
text-align: center;
}
.txt-left {
text-align: left;
}
.txt-right {
text-align: right;
}
@while指令的应用
@while指令工作类似于@for指令。不同的是列表值替代了@for语句中的through值，@while指令将遍历运行，直到值返回是false，终止运行。
下面通过@while指令给button设置不同的大小的一个示例：
$btn-sizes: 6;
$btn-padding: 4px;
@while $btn-sizes > 0 {
.btn-pad-#{$btn-sizes / 2} {
padding: $btn-padding + $btn-sizes $btn-padding * $btn-sizes;
}
$btn-sizes: $btn-sizes - 2;
}
编译出来的CSS如下：
.btn-pad-3 {
padding: 10px 24px;
}
.btn-pad-2 {
padding: 8px 16px;
}
.btn-pad-1 {
padding: 6px 8px;
}
结论
这里所有指令的示例都非常的简单，但是希望他们能说明如何使用这些指令帮助你编写精简的CSS。如果你是第一次接触这些指令，我强烈建议你执行这些示例，更好的帮助你了解这些Sass指令。这样你也可以熟悉如何使用这些指令编译自己代码，从而编写出更精简的代码。实现更强的功能。
译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！
如需转载烦请注明出处：
英文原文：http://flippinawesome.org/2014/03/03/getting-into-sass-control-directives
中文译文：http://www.w3cplus.com/preprocessor/getting-into-sass-control-directives.html