Sass 插值

1. 前言

在很多編程器語言中都有插值這個概念，在 Sass 樣式表的任何地方幾乎都可以使用插值，你可以將這些包裹在 #{} 中來使用，所以記住在 Sass 中使用插值的方式是 #{} ，本節(jié)我們一起來看一下插值在 Sass 中的使用場景以及它的語法～

2. 什么是插值？

插值也就是可以在特定的區(qū)域插入一段表達(dá)式或者插入一個變量，以此來實現(xiàn)內(nèi)容動態(tài)變換的需求。

3. 語法示例

我們先來看一段官網(wǎng)給出的 Sass 代碼來直觀感受一下插值是什么樣的：

@mixin corner-icon($name, $top-or-bottom, $left-or-right) {
  .icon-#{$name} { // 使用了插值
    background-image: url("/icons/#{$name}.svg");
    position: absolute;
    #{$top-or-bottom}: 0; // 使用了插值
    #{$left-or-right}: 0; // 使用了插值
  }
}

@include corner-icon("mail", top, left);

上面這段代碼一眼看去挺復(fù)雜的，不要慌！這是 Sass 中的混合指令，在后面的 Sass 混合指令中我們會詳細(xì)的講解它，在本節(jié)你只需要知道插值可以在混合指令中使用。在上面的代碼中我標(biāo)注了哪里使用了插值，你可以感受下記住它長什么樣子，這三處都使用插值插入了變量的值，這段代碼將會被轉(zhuǎn)換為如下的 CSS 代碼：

.icon-mail {
  background-image: url("/icons/mail.svg");
  position: absolute;
  top: 0;
  left: 0;
}

4. 使用場景

上面的語法示例你感受了插值的寫法，這里我們開始詳細(xì)講解插值的各種使用場景，除了上面所示例的在 Sass 指令中可以使用外，它還可以應(yīng)用于以下的一些場景：

• 在選擇器中使用
• 在屬性名中使用
• 在屬性值中使用
• 在注釋中使用

這里我們暫且詳細(xì)講解這四種使用場景，在 Sass 指令和在 Sass 函數(shù)中也是可以使用的，不過我們會在其對應(yīng)的章節(jié)再去做講解。下面我們先看下這四種使用場景。

4.1 在選擇器中使用

我們一般在寫頁面的時候會為 DOM 元素定義一些 class 或 id ，當(dāng)我們?yōu)槠鋵憳邮降臅r候會用不同的選擇器，那么在選擇器中我們可以使用插值來拼接一些類名等等，我們舉個例子來看下：

$name: item;
.ul-#{$name} { // 使用插值
  width: 200px;
  .li-#{$name} { // 使用插值
    width: 100%;
  }
}
.box-#{$name} { // 使用插值
  height:100px;
  .#{$name} { // 使用插值
    height:100%;
  }
}

可以看到上面的代碼，我制定了一個 DOM 層級結(jié)構(gòu)，這種結(jié)構(gòu)也是很常見的，可能很多子元素的類名我們都帶有 item ，那么我們就可以把它提取為一個變量然后通過在選擇器中應(yīng)用插值來拼接，這樣就很方便我們維護，我們想改子元素類名的時候就不需要逐一的去更改了。上面這段 Sasd 代碼轉(zhuǎn)換為 CSS 如下：

.ul-item {
  width: 200px;
}
.ul-item .li-item {
  width: 100%;
}

.box-item {
  height: 100px;
}
.box-item .item {
  height: 100%;
}

4.2 在屬性名中使用

除了在選擇器中使用，在 Sass 屬性名上也是可以使用插值的，也就是說你在寫 CSS 屬性名的時候你也是可以使用插值來拼接的，我們舉個例子來看下：

$name: color;
$position: top;
body {
  background-#{$name}: red;
  border-#{$name}: blue;
  padding-#{$position}: 5px;
  margin-#{$position}: 10px;
  #{$position}: 20px;
}

可以看到上面的代碼中我對 CSS 的屬性名使用了插值，可以用這種方式來拼接屬性名，不過在實際項目中不是很常用，一般都是在指令里這么運用，就像在前面語法示例中舉的例子一樣。上面這段代碼轉(zhuǎn)換成 CSS 為：

body {
  background-color: red;
  border-color: blue;
  padding-top: 5px;
  margin-top: 10px;
  top: 20px;
}

4.3 在屬性值中使用

在屬性值中使用插值應(yīng)該算是比較常用的，插值使你在屬性值中不僅可以插入值，還可以插入表達(dá)式來計算。除此之外我們在前面的運算章節(jié)中，不知道你是否還記得，我們對兩個變量使用 / 標(biāo)識符的時候，如果你不想對這兩個變量進(jìn)行除法運算而是進(jìn)行分隔，那么就可以使用插值避免運算。

可以說插值在屬性值中的應(yīng)用很廣泛也很實用，我們來舉例看下：

$one: 20px;
$two: 2;
$family: "UaTy";
div {
  margin: $one / $two; // 除法運算
  margin: #{$one} / #{$two}; // 分隔
  font-family: "MyFo #{$family}"; // 帶引號的字符串會轉(zhuǎn)換為不帶引號
  width: calc(100% - $one * 2 *$two); // calc函數(shù)中內(nèi)容會被當(dāng)作字符串處理
  width: calc(100% - #{$one * 2 *$two}); // calc函數(shù)中插值的內(nèi)容會進(jìn)行運算
}

上面的代碼中我對每一行都進(jìn)行了標(biāo)注，你要仔細(xì)看下，在屬性值中你可以用這些方式來使用插值，上面的代碼將會被轉(zhuǎn)換為如下的 CSS 代碼：

div {
  margin: 10px;
  margin: 20px/2;
  font-family: "MyFo UaTy";
  background-image: url(http://xxx.xxx.xxx/a.jpg);
  width: calc(100% - $one * 2 *$two);
  width: calc(100% - 80px);
}

在屬性值中應(yīng)用插值的場景還蠻多的，你可以這么來使用以提高你的開發(fā)效率～

4.4 在注釋中使用

在 Sass 中的注釋里也是可以使用插值的，而且如果插值中的內(nèi)容是一段表達(dá)式，將會返回表達(dá)式的結(jié)果，舉個例子來看下：

/* 在注釋中使用插值:
 * 2 + 2 = #{2 + 2} */
/* #{9 + 8 * 2} */

我們可以在注釋中可以這么使用插值，具體什么時候需要使用看你的需求，你需要知道插值的這種使用方式，上面的代碼將會被轉(zhuǎn)換為如下的 CSS 代碼：

/* 在注釋中使用插值:
 * 2 + 2 = 4 */
/* 25 */

5. 實戰(zhàn)經(jīng)驗

在我的實際項目中，在函數(shù)和指令中使用插值比較多，在后面函數(shù)和指令的章節(jié)你會看到插值的更多運用，這里我列出在屬性值以及選擇器中的使用。在我項目中專門維護變量的文件中，定義了如下的幾個變量：

$primary-dom-name: "box"; // 主要父級元素類名
$primary-child-name: "item"; // 主要子元素類名
$public-top: 10px;
$public-bottom: 10px;
$public-margin: 12px;
$public-padding: 14px;

在我項目中的導(dǎo)航樣式中我使用了上面的這些變量，代碼如下：

.menu-#{$primary-dom-name} {
  width: 200px;
  height: calc(100% - #{40px - $public-bottom});
  background: #cccccc;
  overflow-x:hidden;
  overflow-y: auto;
  padding: $public-padding;
  .li-#{$primary-child-name} {
    width:100%;
    height: 40px;
    margin-bottom: $public-margin;
    text-align:center;
    line-height:40px;
    color: blue;
    .txt-#{$primary-dom-name} {
      border-bottom: 2px solid #999999;
    }
    &:hover {
      background: #999999;
    }
  }
  .logo-#{$primary-dom-name} {
    width: 50px;
  }
}

可以看到，當(dāng)有一天我們因為業(yè)務(wù)或者什么其他的需要，我們需要更換類名或者調(diào)整間距的時候，我們直接更改變量值就 ok 了，這樣維護起來方便的多！不過一般在公司的項目中，這種公共的樣式代碼維護一般是由架構(gòu)組或者專門的人來維護的，如果你不負(fù)責(zé)維護這些，你一定不要輕易去改動這些代碼！

6. 小結(jié)

本節(jié)內(nèi)容我們講解了 Sass 中的插值以及它的使用場景，一般我們會在如下的場景使用：

• 在函數(shù)和指令中使用

• 在選擇器中使用

• 在屬性名中使用

• 在屬性值中使用

• 在注釋中使用

我們通過下圖來更深地回憶下本節(jié)插值的使用場景：

總體來說插值在 Sass 中用的還是比較多的，使用也比較簡單不是那么復(fù)雜，后面在函數(shù)或指令中、在你項目的 Sass 中看見 #{} 要知道這是 Sass 的插值！