Sass的表达式和控制命令-守望者-AIR技术交流

破晓发表于 2016-8-18 16:30:20

Sass的表达式和控制命令

来源：http://www.w3cplus.com/preprocessor/sass-basics-control-directives-expressions.html<div> </div><div>如果你深入地使用过 Sass，那么一定会接触过 mixin。一个独立的 mixin 往往聚合了大量的控制指令来实现复杂的功能。在本文中我们就将这些控制指令和表达式做一些讲解和实践。也许你在开发中不见得会用到它们，但是熟悉一下这些指令，可能会有意想不到的收获！<h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;"><code style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em;">if()</code></h2><code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">if()</code> 是 Sass 的一个内建函数，与之相似的 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">@if</code> 则是一个内建指令。<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">if()</code> 用来做条件判断并返回特定值，示例如下：<pre class="ruby" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="ruby" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">@mixin test($condition) {
$color: if($condition, blue, red);
color:$color
}

.firstClass {
@include test(true);
}

.secondClass {
@include test(false);
}
</code></pre>编译结果：<pre class="css" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="css" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">.firstClass {
color: blue;
}

.secondClass {
color: red;
}
</code></pre>在上例中，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">if()</code> 函数内的三个参数分别代表：测试条件，测试成功返回值，测试失败返回值（除了 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">false</code> 和 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">null</code> 之外的所有测试条件都被视为测试成功）。如果使用数字作为上述示例的条件，同样会返回测试成功的值：<pre class="ruby" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="ruby" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">.firstClass {
@include test(1);
}
</code></pre><h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;"><code style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em;">@if</code></h2><code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">@if</code> 后跟一个表达式，如果表达式的结果为 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">true</code>，则返回特定的样式，示例如下：<pre class="ruby" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="ruby" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">@mixin txt($weight) {
color: white;
@if $weight == bold { font-weight: bold;}
}

.txt1 {
@include txt(none);
}

.txt2 {
@include txt(bold);
}
</code></pre>编译结果：<pre class="css" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="css" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">.txt1 {
color: white;
}

.txt2 {
color: white;
font-weight: bold;
}
</code></pre>此外，我们可以使用 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">@if ... @else if ... @else</code> 结构来处理多个条件，示例如下：<pre class="ruby" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="ruby" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">@mixin txt($weight) {
color: white;
@if $weight == bold { font-weight: bold;}
@else if $weight == light { font-weight: 100;}
@else if $weight == heavy { font-weight: 900;}
@else { font-weight: normal;}
}

.txt1 {
@include txt(bold);
}

.txt2 {
@include txt(light);
}

.txt3 {
@include txt(heavy);
}

.txt4 {
@include txt(none);
}

.txt5 {
@include txt(normal)
}
</code></pre>编译结果：<pre class="css" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="css" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">.txt1 {
color: white;
font-weight: bold;
}

.txt2 {
color: white;
font-weight: 100;
}

.txt3 {
color: white;
font-weight: 900;
}

.txt4 {
color: white;
font-weight: normal;
}

.txt5 {
color: white;
font-weight: normal;
}
</code></pre>这里的 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">.txt4</code> 和 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">.txt5</code> 是用来向各位演示 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">@if</code> 的解析机制。在 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">.txt1</code> 中，如果不传入 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">bold</code>，那么就不会生成 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">font-weight</code> 相关的样式。<h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;"><code style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em;">@for</code></h2><code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">@for</code> 指令常用于循环输出。<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">@for</code> 有两种使用方式：<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">from start through end</code> 和 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">from start to end</code>，两者的区别在于，前者遍历的范围是 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);"></code>, 而后者的遍历范围是 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);"></code>。在 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">@for</code> 循环中使用一个固定变量来替代遍历到的元素。如果你想实现从大到小的遍历，只需让 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">start</code> 大于 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">end</code> 即可。下面是 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">@for</code> 的一个简单示例：<pre class="bash" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="bash" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">@for $i from 1 through 4 {
.col-#{$i} { width: 100/4 * $i + %;}
}
</code></pre>使用上面的这个例子，我们可以创建一套简单的栅格系统，编译结果如下：<pre class="css" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="css" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">.col-1 {
width: 25%;
}

.col-2 {
width: 50%;
}

.col-3 {
width: 75%;
}

.col-4 {
width: 100%;
}
</code></pre>从上面的示例中，我们综合了 Sass 的循环、变量、计算等多重功能。<h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;"><code style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em;">@each</code></h2><code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">@each</code> 指令同样可以用于循环输出，和 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">@for</code> 的差别在于，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">@each</code> 通过遍历 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">list</code> 或者 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">map</code> 实现循环输出：<pre class="ruby" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="ruby" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">@each $usr in bob, john, bill, mike {
.#{$usr}-avatar {
 background-image: url('/img/#{$usr}.png');
}
}
</code></pre><code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">@each</code> 后面的 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">$usr</code> 变量用于保存每次遍历到的元素，然后使用差值语法（<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">#{var}</code>）来拼接正确的图片路径，编译结果如下：<pre class="css" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="css" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">.bob-avatar {
background-image: url("/img/bob.png");
}

.john-avatar {
background-image: url("/img/john.png");
}

.bill-avatar {
background-image: url("/img/bill.png");
}

.mike-avatar {
background-image: url("/img/mike.png");
}
</code></pre>如果遍历的对象是一个 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">map</code>，那么我们就可以使用两个变量来存储元素的 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">key</code> 和 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">value</code>，示例如下：<pre class="ruby" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="ruby" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">$ppl: ( usr1:bob, usr2:john, usr3:bill, usr4:mike );

@each $key, $usr in $ppl{
.#{$usr}-avatar {
 background-image: url('/img/#{$usr}.png');
}
}
</code></pre>此外，针对多个列表的遍历，我们也可以使用多个参数来保存相应的元素：<pre class="ruby" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="ruby" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">$alt: alert, yellow, red;

$sub: submit, white, green;

$bck: back, blue, transparent;

@each $type, $txt, $back in $alt,$sub,$bck {
.#{$type}-button {
 color: $txt;
 background-color: $back;
}
}
</code></pre>编译结果如下：<pre class="css" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="css" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">.alert-button {
color: yellow;
background-color: red;
}

.submit-button {
color: white;
background-color: green;
}

.back-button {
color: blue;
background-color: transparent;
}
</code></pre><h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;"><code style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em;">@while</code></h2><code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">@while</code> 指令也可以用于循环输出，它后面跟一个表达式，如果表达式结果为 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">false</code>，则停止循环体。下面使用 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">@while</code> 来重写上述的 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">@for</code> 示例：<pre class="bash" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="bash" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">$x:1;

@while $x < 13 {
.col-#{$x} { width: 100/12 * $x;}
$x: $x + 1;
};
</code></pre>在上面的示例中，我们用一个表达式来控制 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">@while</code> 指令的执行，表达式中有一个变量 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">$x</code>，该变量一方面用于插值计算，另一方面在循环体内执行累加，最终当 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">$x < 13</code> 的结果为 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">false</code> 时，程序就会推出 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">@while</code> 循环。<h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">总结</h2>Sass 的诸多特性让前端开发变得无比轻松，虽然 Sass 中的指令很强大，但是如果不是构建一个大象框架，往往并不能感觉到其中的美妙。随着对 Sass 的了解越来越深入，总有一天你会用到这些指令的 ^_^。<blockquote style="box-sizing: inherit; padding: 15px 20px; margin-bottom: 25px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(0, 163, 207); color: rgb(64, 64, 64); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; background: rgb(246, 246, 246);">本文根据<a href="http://www.sitepoint.com/author/rdawson/" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">@Reggie Dawson</a>的《<a href="http://www.sitepoint.com/sass-basics-control-directives-expressions/" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">Sass Basics: Control Directives and Expressions</a>》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：<a href="http://www.sitepoint.com/sass-basics-control-directives-expressions/" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">http://www.sitepoint.com/sass-basics-control-directives-expressions/</a>。</blockquote></div>

页: [1]

守望者--AIR技术交流's Archiver

Sass的表达式和控制命令