了解 Sass 的控制命令

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，通过引用变量列表，@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指令。这样你也可以熟悉如何使用这些指令编译自己代码，从而编写出更精简的代码。实现更强的功能。