前言
Sass（Scss）混合指令看作函式，可以傳遞引數、引數變數、可以插入內容（類似于 Vue 組件插槽），自定義函式，可以回傳值，也有混合指令的特性，高效地管理和使用 CSS 樣式，除了嵌套以外就是混合指令、函式，以及變數，
混合指令的作用就是重復使用一堆 CSS 樣式，減少我們重復寫的次數，只需要呼叫混合指令就可以完成作業，
指令基礎
定義混合指令
混合指令用@mixin來表示，之后就是指令名稱，下面是混合指令的定義語法規則：
@mixin name {
// ...
}
比如，垂直水平居中的樣式經常用到，所以搞一個混合指令比較合適：
@mixin flex {
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
}
上面的混合指令還不算靈活，沒有發揮它的優勢，得配合引數或變數使用才是混合指令的完全體，
呼叫混合指令
呼叫混合指令用@include表示，加上指令名稱就可以了，下面是呼叫混合指令的語法規則：
@include name();
這樣就相當于把上面定義好的那一堆樣式直接拿了過來，而我們不需要重復寫一樣的樣式：
.app {
@include flex();
}
假如元素對齊方式、排列方式要根據場景有所變化呢？屬性值也是根據情況來變化，于是就要用到引數和變數，
引數基礎
定義引數
引數的定義與變數定義的規則一樣，都是$符號起頭，引數其實就是一個占位符，等到我們呼叫指令時給其傳遞值代替占位符作為屬性值就可以了，下面是給指令定義引數：
@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;
}
呼叫指令并傳值：
.app {
@include flex(space-between, center, center, row, wrap);
}
引數默認值
給引數添加默認值，在呼叫時選擇性傳遞引數，可以不用按照上面那樣一個個地傳遞，點到為止：
@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;
}
給第一個引數傳遞值，覆寫默認值：
.app {
@include flex(flex-start);
}
如果我們要給中間或者其他位置（不按照順序）傳遞值，使得值與引數的位置不匹配，導致效果并非我們想要的，@include flex(flex-start, nowrap)，nowrap 是我要給最后一個引數傳值，真實的情況是給到了第二個屬性值，于是就要用到關鍵詞引數，
關鍵詞引數
關鍵詞引數的作用就是，只對混合指令中某一個具體的引數進行傳遞，就是按照順序坐座位和拿著座位號對號入座的區別；關鍵詞引數就是拿著座位號對號入座，而不影響其他引數，
.app {
@include flex($justify: flex-start, $flex-wrap: wrap);
}
如下圖，只改變了第一個和最后一個引數的值：
引數變數
引數變數就是在不知道傳入多少個引數的情況下使用的，比如 box-shadow 樣式，引數可以一個或者多個：
@mixin box-shadow($values...) {
box-shadow: $values;
}
.app {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
// ---------上面是一種用法，結合變數，我們也可以這樣用---------
$values: 0px 4px 5px #666, 2px 6px 10px #999;
.app {
@include box-shadow($values);
}
匯入內容
Vue 組件有一個插槽概念，作用是可以讓我們給組件提供 HTML 內容，匯入內容的作用也是如此：
@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代替樣式，呼叫時再傳遞：
.app {
@include flex($justify: flex-start) {
flex-direction: row;
flex-wrap: nowrap;
// ... 其他樣式也可以插入到內容中
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502733.html
標籤：Html/Css
上一篇：S/4 HANA 中的 Email Template
下一篇：2022-8-23 css