Sass 控制命令：@if,@for,@each 和@while

发表于 分类于
本文字数： 4.5k 阅读时长 ≈ 4 分钟

Sass 的控制命令是创建库和重复使用代码库的一个基础，使用好 Sass，需要掌握好 Sass 的控制命令，只有掌握了这些，你才能进入 Sass 的下一个层次的学习。

Sass 控制命令的速成

Sass 控制命令可以让你在编写@mixin和@function时提供相应的流程和逻辑判断。

在这篇文章中我们将覆盖：@if，@for，@each和@while。

使用守则

如果你想跟着这篇文章学习 Sass 控制命令，你可以先从Github下载相应的示例代码。

为了更好的帮助大家理解，我将示例中的 Sass 语法格式更换成 SCSS 格式。——@大漠

@if

@if指令是一个SassScript，它可以根据条件来处理样式块，如果条件为true返回一个样式块，反之false返回另一个样式块。

这里有一个@if指令的简单示例，我已经对示例做了简化处理，只适合阅读，并不太实用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$boolean: true !default;

@mixin simple-mixin {
    @if $boolean {
        @debug "$boolean is #{$boolean}";
        display: block;
    }
    @else {
        @debug "$boolean is #{$boolean}";
        display: none;
    }
}

.some-selector {
    @include simple-mixin;
}

编译出来的 CSS:

1
2
.some-selector {
  display: block; }

还要注意在每个选项中都加了一个@debug信息。在这篇文章中并不详细介绍@debug，但是我添加了，主要是在命令行中输出时可以看到提示信息，让用户了解某些事情。在一些复杂的@mixin或@function中使用@warn或@debug，可以起到一定的作用，可以让程序员更容易的发现和追查问题，也更好的提供用户体验。

正如上面的示例，我们在终端编译之后，可以看到@degbug中的对应相关信息：

1
2
3
4
>>> Change detected to: test.scss
test.scss:7 DEBUG: $boolean is true
      write test.css
      write test.css.map

@for

@for指令有两种形式。

第一种形式是：

1
@for $var from <start> through <end>

从<start>开始循环，到<end>结束，非常简单明了。来看一个简单的示例：

1
2
3
4
5
6
7
$class-slug: for !default;

@for $i from 1 through 4 {
    .#{$class-slug}-#{$i}{
        width: 60px + $i;
    }
}

编译出来的 CSS

1
2
3
4
5
6
7
8
9
10
11
.for-1 {
  width: 61px; }

.for-2 {
  width: 62px; }

.for-3 {
  width: 63px; }

.for-4 {
  width: 64px; }

从示例中我们可以明确的知道，从<start>开始（此处示例是 1），一直遍历到<end>（此处示例是 4）。包括<end>的值。

第二种形式是：

1
@for $var from <start> to <end>

循环从<start>开始，一直遍历循环到<end>结束。这种形式的循环只要碰到<end>就会停止循环（将不会遍历<end>值）。我们来看一个示例：

1
2
3
4
5
6
7
$class-slug: for !default;

@for $i from 1 to 4 {
    .#{$class-slug}-#{$i}{
        width: 60px + $i;
    }
}

编译出来的 CSS

1
2
3
4
5
6
7
8
.for-1 {
  width: 61px; }

.for-2 {
  width: 62px; }

.for-3 {
  width: 63px; }

@for循环指令除了可以从小数值到大数值循环之外，还可以从大数值循环到小数值。而且两种形式都支持。

1
2
3
4
5
6
7
$class-slug: for !default;

@for $i from 5 through 1 {
    .#{$class-slug}-#{$i}{
        width: 60px + $i;
    }
}

编译出 CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.for-5 {
  width: 65px; }

.for-4 {
  width: 64px; }

.for-3 {
  width: 63px; }

.for-2 {
  width: 62px; }

.for-1 {
  width: 61px; }

在两种形式之下，$var都可以是任意的变量名。在通常的习惯中，一般都将$var命名为$i来做变量名，用于@for指令的递增或递减。

如果你真想看看@for指令的真实示例，你可以看看通过他创建的一个网格系统。你可以在网格系统项目的第 37-53 行看到@for的使用。

你可以在文件中看到下面这样的代码样本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Loops to enumerate the classes
// Yep, this saves us tons of typing (if this were CSS)
@for $i from 1 through $grid-columns {
  .grid-#{$i} { @include grid-base($i); @extend .grid-block; }
}
@for $i from 1 to $grid-columns {
  .grid-prefix-#{$i} { @include grid-prefix($i); }
}
@for $i from 1 to $grid-columns {
  .grid-suffix-#{$i} { @include grid-suffix($i); }
}
@for $i from 1 to $grid-columns {
  .grid-push-#{$i} { @include grid-push($i); }
}
@for $i from 1 to $grid-columns {
  .grid-pull-#{$i} { @include grid-pull($i); }
}

@each

@each指令形式：

1
@each $var in <list>

如果你没有接触过列表，也不要紧，他也非常简单，就是把 2 变成 1。

在下面的例子中你可以看到，$var就是一个变量名，<list>是一个 SassScript 表达式，他将返回一个列表值。变量$var会在列表中做遍历，并且遍历出与$var对应的样式块。

这有一个@each指令的简单示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
$list: adam john wynn mason kuroir;

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}

编译出 CSS:

1
2
3
4
5
6
7
8
9
10
.author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat; }

@while

@whild指令也需要 SassScript 表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为false时停止循环。这个和@for指令很相似，只要@while后面的条件为true就会执行。

这里有一个@while指令的简单用例：

1
2
3
4
5
6
7
8
9
$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

编译出 CSS：

1
2
3
4
5
6
7
8
9
10
11
.while-4 {
  width: 24px; }

.while-3 {
  width: 23px; }

.while-2 {
  width: 22px; }

.while-1 {
  width: 21px; }

结论

正如你所看到的，Sass 指令可以在你的@mixin或者@function中添加循环遍历，条件判断功能，这样可以帮助你创建一个真正强大的库。