Sass 控制指令

1. 前言

Sass 為我們提供了很多控制指令，使得我們可以更高效的來(lái)控制樣式的輸出，或者在函數(shù)中進(jìn)行邏輯控制。本節(jié)內(nèi)容我們就來(lái)講解什么是 Sass 控制指令？它能用來(lái)做什么？它將使你更方便的編寫(xiě) Sass 。

2. 什么是 Sass 控制指令

控制指令，故名思義它是通過(guò)條件來(lái)控制某些邏輯的，提到條件你首先肯定想到了 if ，沒(méi)錯(cuò)這是 Sass 控制指令的一種，除了這個(gè)還有循環(huán)，所以 Sass 一共為我們提供了 4 種控制指令，它們分別是：

• @if 指令
• @each 指令
• @for 指令
• @while 指令

如果你熟悉其他的編程語(yǔ)言或者你熟悉 javascript ，看見(jiàn)上面這四種是不是很熟悉，它們?cè)?Sass 中也是用來(lái)做條件判斷和循環(huán)的，下面我們就看一下它們?nèi)绾卧?Sass 中應(yīng)用。

3. 語(yǔ)法詳情

一般控制指令都是應(yīng)用于函數(shù)或 @mixin 中，我們舉一個(gè)在函數(shù)中應(yīng)用的例子來(lái)感受下：

// 判斷class長(zhǎng)度范圍
@function classLong($class, $max) {
  $leng: str-length($class);
  @if $leng > $max {
    @return true;
  } @else {
    @return false;
  }
}

可以看到上面的代碼中我們用到了 @if 指令，下面我們來(lái)詳細(xì)的講解這四種控制指令。

3.1 @if 指令

@if 指令是在 @if 后跟一個(gè)表達(dá)式，然后再接 {} ，如果表達(dá)式為 true 則執(zhí)行 {} 里的代碼邏輯，寫(xiě)為 @if { … } ，我們來(lái)舉例看下：

@mixin avatar($size, $circle: false) {
  height: $size;

  @if $circle {
    width: $size / 2;
  }
}

.square { @include avatar(100px, $circle: true); }

上面我們?cè)?@mixin 中使用了 @if 指令，如果 @if 后面的表達(dá)式或變量為 true ，它將執(zhí)行 {} 里的代碼。上面的代碼在 .square 的樣式中使用了 @mixin ，它將會(huì)生成如下的 CSS 代碼：

.square {
  height: 100px;
  width: 50px;
}

從上面兩段代碼的對(duì)比中我們看到，我們?yōu)?@mixin 傳入了 $size 并且 @if 后面的變量為 true，所以它執(zhí)行了 width: $size / 2 生成的 CSS 就是 width: 50px ，在這里你要重點(diǎn)關(guān)注 @if 指令的用法，關(guān)于 @mixin 在后面的章節(jié)我們會(huì)詳細(xì)講到，這里你可以先認(rèn)識(shí)下就好。

3.1.1 @else 和 @else if 指令

如果你了解任何的編程語(yǔ)言，那么你一定知道有 if 就會(huì)有 else 和 else if ，如果 @if 后面的表達(dá)式為 false ，就會(huì)判斷 @else if 后面的表達(dá)式，如果還是 false 則會(huì)繼續(xù)往后走，如果所有表達(dá)式都為 false 則最終會(huì)執(zhí)行 @else 后面的 {} 中的代碼邏輯。

當(dāng)然 @else if 和 @else是在你需要多條邏輯判斷的時(shí)候?qū)懙?，也可以不?xiě)，就像上面的代碼一樣。說(shuō)了這么多可能你不是很理解，一碼勝千言，我們直接將上面的代碼段改造下，實(shí)際體會(huì)一下：

@mixin avatar($size, $circle: 1) {
  height: $size;

  @if $circle == 1 {
    width: $size / 2;
  } @else if $circle == 2 {
    width: $size / 5;
  } @else {
    width: $size;
  }
}


.a { @include avatar(100px); }
.b { @include avatar(100px, $circle: 2); }
.c { @include avatar(100px, $circle: 3); }

上面的代碼中我有 3 條判斷邏輯對(duì)應(yīng)不同的代碼塊，然后我在 .a .b .c 中分別調(diào)用 @mixin 并傳入不同的參數(shù)，轉(zhuǎn)換后的 CSS 代碼如下：

.a {
  height: 100px;
  width: 50px;
}

.b {
  height: 100px;
  width: 20px;
}

.c {
  height: 100px;
  width: 100px;
}

通過(guò)上面的講解可以看到 @if 指令還是非常實(shí)用的，在你寫(xiě)函數(shù)的時(shí)候很多地方會(huì)用到，所以這塊要好好記住。

3.2 @each 指令

@each 指令一般用來(lái)循環(huán)一個(gè)列表或 Map ，它的寫(xiě)法是這樣的 @each in { … } ，這其中 expression 表達(dá)式返回一個(gè)列表或者直接就是一個(gè)列表，variable 是列表中的每一項(xiàng)，{} 中是每次循環(huán)都會(huì)執(zhí)行的代碼，我們舉例來(lái)看下:

$borders: 2px, 3px, 5px;

@each $bor in $borders {
  .border-#{$bor} {
    border:$bor solid;
  }
}

上面的代碼中我們通過(guò) @each 循環(huán)一個(gè) $borders 列表，來(lái)生成不同的 class 的 border 樣式，上面這段代碼轉(zhuǎn)換為 CSS 如下：

.border-2px {
  border: 2px solid;
}

.border-3px {
  border: 3px solid;
}

.border-5px {
  border: 5px solid;
}

可以看到上面的寫(xiě)法是不是很方便，這樣就直接生成了不用的類名并且對(duì)應(yīng)不同的樣式，在 Sass 編程中 @each 也是很常用的指令，所以這個(gè)你是一定要會(huì)用的，尤其是在寫(xiě)函數(shù)的時(shí)候！

3.3 @for 指令

@for 指令很有意思，它可以設(shè)定一個(gè)范圍然后在這個(gè)范圍內(nèi)循環(huán)，比如說(shuō)在 1 ～ 5 這個(gè)范圍內(nèi)，或者在 3 ~ 6 這個(gè)范圍內(nèi)等等。

它有兩種寫(xiě)法 @for from to { … } 或者 @for from through { … }，這兩種寫(xiě)法中variable 都是每次循環(huán)時(shí)候的數(shù)值，start 都表示開(kāi)始的邊界，end 都表示結(jié)束的邊界；

這兩種寫(xiě)法不同的是 through 包含 start 與 en ，而 to 包含 start 但不包含 end。文字描述難免有些抽象，我們直接舉例看下：

$base-color: #036;

// 范圍是 1 ~ 3
@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}
// 范圍是 4 ~ 6
@for $i from 4 through 6 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

上面的代碼我們用的是 through 寫(xiě)法，分別寫(xiě)了 1 ~ 3 范圍的循環(huán)和 4 ~ 6范圍的循環(huán)，也就是說(shuō)循環(huán)體中的代碼塊會(huì)分別被計(jì)算 3 次，它最終會(huì)轉(zhuǎn)換為如下的 CSS 代碼：

// 1 ~ 3 范圍生成的
ul:nth-child(3n+1) {
  background-color: #004080;
}

ul:nth-child(3n+2) {
  background-color: #004d99;
}

ul:nth-child(3n+3) {
  background-color: #0059b3;
}
// 4 ~ 6 范圍生成的
ul:nth-child(3n+4) {
  background-color: #0066cc;
}

ul:nth-child(3n+5) {
  background-color: #0073e6;
}

ul:nth-child(3n+6) {
  background-color: #0080ff;
}

看到轉(zhuǎn)換后的 CSS 是不是感覺(jué)使用 @for 指令寫(xiě)起來(lái)簡(jiǎn)直飛快，下面我們?cè)谑褂?to 寫(xiě)法來(lái)舉個(gè)例子看下：

$base-color: #036;

@for $i from 1 to 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

上面使用 to 寫(xiě)法的代碼將會(huì)轉(zhuǎn)換為如下的 CSS 代碼：

ul:nth-child(3n+1) {
  background-color: #004080;
}

ul:nth-child(3n+2) {
  background-color: #004d99;
}

好了，通過(guò)上面的代碼可以看出使用 to 寫(xiě)法是不包含 end 邊界的。從上面我們舉的兩個(gè)例子不難看出，@for 指令可以極大的簡(jiǎn)化我們編寫(xiě)冗余繁瑣的 CSS ，你自己需要多嘗試這個(gè)指令來(lái)實(shí)際感受下。

3.4 @while 指令

@while 指令很像 javascript 中的 while 循環(huán)，在 Sass 中 @while 指令的寫(xiě)法是 @while { … } ，當(dāng)表達(dá)式 expression 結(jié)果為 true 時(shí)就執(zhí)行 {} 里的代碼，直到表達(dá)式 expression 結(jié)果為 false 。我們舉例來(lái)看下：

$num: 4;
@while $num >= 1 {
  .box-#{$num} {
    font-weight: 100 * $num;
  }
  $num: $num - 1;
}

從上面的代碼可以看出我設(shè)定了一個(gè)變量 $num 為 4 ，然后每次循環(huán)將這個(gè)變量 -1 ，知道 $num < 1 的時(shí)候會(huì)停止循環(huán)，也就是說(shuō)會(huì)循環(huán) 4 次，我們看下下面轉(zhuǎn)換為 CSS 的代碼：

.box-4 {
  font-weight: 400;
}

.box-3 {
  font-weight: 300;
}

.box-2 {
  font-weight: 200;
}

.box-1 {
  font-weight: 100;
}

@while 指令可以讓你很方便的控制循環(huán)次數(shù)，在實(shí)際應(yīng)用中也是非常有用的！

4. 實(shí)戰(zhàn)經(jīng)驗(yàn)

在實(shí)際項(xiàng)目中應(yīng)用 Sass 控制指令的地方還是蠻多的，這里我說(shuō)一個(gè)在我的項(xiàng)目中的應(yīng)用。我的項(xiàng)目中有個(gè)需求是將視口分為 12 等份，然后根據(jù)不同的 class 類名來(lái)為其寬度設(shè)置不同的百分比，這很像其他 UI 庫(kù)中的柵格系統(tǒng)，我們是這樣在項(xiàng)目中實(shí)現(xiàn)的：

@for $i from 0 through 12 {
  .width-#{$i} {
    width: (1 / 12 * $i) * 100%;
  }
}

上面這幾行代碼就實(shí)現(xiàn)了我的需求，我需要有 .width-0 到 .width-12 的選擇器，同時(shí)它們的樣式分別是對(duì)應(yīng)的百分比，我直接做了一個(gè)從 0 到 12 的循環(huán)，然后在其循環(huán)體中動(dòng)態(tài)生成 class 和樣式，它轉(zhuǎn)換為 CSS 代碼如下：

.width-0 {
  width: 0%;
}

.width-1 {
  width: 8.3333333333%;
}

.width-2 {
  width: 16.6666666667%;
}

.width-3 {
  width: 25%;
}

.width-4 {
  width: 33.3333333333%;
}

.width-5 {
  width: 41.6666666667%;
}

.width-6 {
  width: 50%;
}

.width-7 {
  width: 58.3333333333%;
}

.width-8 {
  width: 66.6666666667%;
}

.width-9 {
  width: 75%;
}

.width-10 {
  width: 83.3333333333%;
}

.width-11 {
  width: 91.6666666667%;
}

.width-12 {
  width: 100%;
}

從上面這個(gè)示例中是不是可以看出使用控制指令來(lái)實(shí)現(xiàn)一些需求很方便，這樣可以省去你編寫(xiě)大量 CSS 代碼的工作，而且計(jì)算寬度也僅僅需要設(shè)置好公式即可，在我們的項(xiàng)目中有很多類似的用法，至于 @if 指令一般會(huì)在函數(shù)中做判斷來(lái)使用。

5. 小結(jié)

本節(jié)內(nèi)容我們講解了 Sass 控制指令，它是非常常用的，在 Sass 中有四種控制指令，它們分別是：

• @if 指令
• @each 指令
• @for 指令
• @while 指令

趁熱打鐵，快來(lái)回憶一下這幾個(gè)指令都是干嘛的：

記住它們并多加練習(xí)，控制指令是非常好用的，它可以讓你避免編寫(xiě)過(guò)多冗余的 CSS 代碼，在項(xiàng)目中也很方便維護(hù)?？刂浦噶钍窃?Sass 進(jìn)階中必不可少的知識(shí)！