前言

Sass（Scss）混合指令看作函數(shù)，可以傳遞參數(shù)、參數(shù)變量、可以插入內(nèi)容（類似于 Vue 組件插槽）。自定義函數(shù)，可以返回值，也有混合指令的特性。高效地管理和使用 CSS 樣式，除了嵌套以外就是混合指令、函數(shù)，以及變量。

姚安網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)從2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。

混合指令的作用就是重復(fù)使用一堆 CSS 樣式，減少我們重復(fù)寫的次數(shù)，只需要調(diào)用混合指令就可以完成工作。

指令基礎(chǔ)

定義混合指令

混合指令用@mixin來表示，之后就是指令名稱，下面是混合指令的定義語法規(guī)則：

@mixin name {
 // ...
}

比如，垂直水平居中的樣式經(jīng)常用到，所以搞一個(gè)混合指令比較合適：

@mixin flex {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
}

上面的混合指令還不算靈活，沒有發(fā)揮它的優(yōu)勢(shì)，得配合參數(shù)或變量使用才是混合指令的完全體。

調(diào)用混合指令

調(diào)用混合指令用@include表示，加上指令名稱就可以了，下面是調(diào)用混合指令的語法規(guī)則：

@include name();

這樣就相當(dāng)于把上面定義好的那一堆樣式直接拿了過來，而我們不需要重復(fù)寫一樣的樣式：

.app {
  @include flex();
}

假如元素對(duì)齊方式、排列方式要根據(jù)場景有所變化呢？屬性值也是根據(jù)情況來變化，于是就要用到參數(shù)和變量。

參數(shù)基礎(chǔ)

定義參數(shù)

參數(shù)的定義與變量定義的規(guī)則一樣，都是$符號(hào)起頭。參數(shù)其實(shí)就是一個(gè)占位符，等到我們調(diào)用指令時(shí)給其傳遞值代替占位符作為屬性值就可以了。下面是給指令定義參數(shù)：

@mixin flex($justify, $align-content, $align-items, $flex-dir, $flex-wrap) {
  display: flex;
  justify-content: $justify;
  align-content: $align-content;
  align-items: $align-items;
  flex-direction: $flex-dir;
  flex-wrap: $flex-wrap;
}

調(diào)用指令并傳值：

.app {
  @include flex(space-between, center, center, row, wrap);
}

參數(shù)默認(rèn)值

給參數(shù)添加默認(rèn)值，在調(diào)用時(shí)選擇性傳遞參數(shù)，可以不用按照上面那樣一個(gè)個(gè)地傳遞，點(diǎn)到為止：

@mixin flex($justify: center, $align-content: center, $align-items: center, $flex-dir: row, $flex-wrap: nowrap) {
  display: flex;
  justify-content: $justify;
  align-content: $align-content;
  align-items: $align-items;
  flex-direction: $flex-dir;
  flex-wrap: $flex-wrap;
}

給第一個(gè)參數(shù)傳遞值，覆蓋默認(rèn)值：

.app {
  @include flex(flex-start);
}

如果我們要給中間或者其他位置（不按照順序）傳遞值，使得值與參數(shù)的位置不匹配，導(dǎo)致效果并非我們想要的。@include flex(flex-start, nowrap)，nowrap 是我要給最后一個(gè)參數(shù)傳值，真實(shí)的情況是給到了第二個(gè)屬性值。于是就要用到關(guān)鍵詞參數(shù)。

關(guān)鍵詞參數(shù)

關(guān)鍵詞參數(shù)的作用就是，只對(duì)混合指令中某一個(gè)具體的參數(shù)進(jìn)行傳遞。就是按照順序坐座位和拿著座位號(hào)對(duì)號(hào)入座的區(qū)別；關(guān)鍵詞參數(shù)就是拿著座位號(hào)對(duì)號(hào)入座，而不影響其他參數(shù)。

.app {
  @include flex($justify: flex-start, $flex-wrap: wrap);
}

如下圖，只改變了第一個(gè)和最后一個(gè)參數(shù)的值：

參數(shù)變量

參數(shù)變量就是在不知道傳入多少個(gè)參數(shù)的情況下使用的，比如 box-shadow 樣式，參數(shù)可以一個(gè)或者多個(gè)：

@mixin box-shadow($values...) {
  box-shadow: $values;
}

.app {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

// ---------上面是一種用法，結(jié)合變量，我們也可以這樣用---------

$values: 0px 4px 5px #666, 2px 6px 10px #999;

.app {
  @include box-shadow($values);
}

導(dǎo)入內(nèi)容

Vue 組件有一個(gè)插槽概念，作用是可以讓我們給組件提供 HTML 內(nèi)容。導(dǎo)入內(nèi)容的作用也是如此：

@mixin flex($justify: center, $align-content: center, $align-items: center) {
  display: flex;
  justify-content: $justify;
  align-content: $align-content;
  align-items: $align-items;
  // flex-direction: $flex-dir;
  // flex-wrap: $flex-wrap;
  @content;
}

刪除flex-direction和flex-wrap，用@content代替樣式，調(diào)用時(shí)再傳遞：

.app {
  @include flex($justify: flex-start) {
    flex-direction: row;
    flex-wrap: nowrap;
    // ... 其他樣式也可以插入到內(nèi)容中
  }
}