這篇文章主要講解了“CSS的Sass框架中混合宏的使用”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS的Sass框架中混合宏的使用”吧！
創(chuàng)新互聯(lián)公司從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元桐梓做網(wǎng)站,已為上家服務(wù),為桐梓各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220
我所探討的焦點在 map 這種數(shù)據(jù)類型上，特別是使用 @content，@at-root 和 unique-id() 等指令合并 maps 所實現(xiàn)的奇妙方法。其中之一就是混合宏的設(shè)計模式，這一設(shè)計模式通過使用 @extend 指令和占位符選擇器來解決 Sass 的一些實際問題：
由于常在代碼開始部分引入占位符擴展，所以就應(yīng)該將其置于代碼頂部而不受其他因素所影響；
優(yōu)先使用 @include 還是 @extend？這里給出的答案是 @include。
自意識混合宏的核心是通過創(chuàng)建或擴展占位符選擇器，動態(tài)地生成相關(guān)樣式。當它第一次被傳參調(diào)用后，就會有一個 map 變量記錄下相關(guān)的參數(shù)。隨后，當再次使用相同的參數(shù)調(diào)用時，就會執(zhí)行擴展同一占位符的操作，而不是生成重復代碼。
在下面的代碼中，有一些混合宏的參數(shù)是相同的，有一些參數(shù)是獨有或特定的。那么在最終生成的 CSS 中，就會發(fā)現(xiàn)，具有相同參數(shù)的部分會使用擴展的方式，即合并選擇器的方式；具有獨特或特定參數(shù)的部分，則仍然會生成獨立的選擇器樣式。
SCSS 源代碼和測試數(shù)據(jù)：
CSS Code復制內(nèi)容到剪貼板
// 自意識混合宏示例
// 定義全局 map，保存混合宏的相關(guān)信息
$my-mixin-info: ();
// 使用任意形式的參數(shù)定義混合宏
@mixin my-mixin($pos1, $pos2, $map: (), $rest…) {
// 根據(jù)需要，捕獲部分或全部參數(shù)
$my-args: ($pos1, $pos2, $map);
// 在全局 map 中通過 key($my-args) 查找這些參數(shù)
$id: map-get($my-mixin-info, $my-args);
// 如果找到了 id
@if $id {
// 擴展該 id
@extend %#{$id};
// 生成任意特定的樣式
specific: inspect($rest);
}
// 否則
@else {
// 新建一個 id
$id: unique-id();
// 將該 id 整合入混合宏的 map 中
$my-mixin-info: map-merge($my-mixin-info, ($my-args: $id)) !global;
// 在樣式頂層生成占位符
@at-root {
%#{$id} {
// 生成共有樣式
common: inspect($my-args);
}
}
// 擴展該占位符
@extend %#{$id};
// 生成任意特定的樣式
specific: inspect($rest);
}
}
.test {
@include my-mixin(1, 2, (), 4, 5);
}
.test2 {
@include my-mixin(1, 2);
}
.test3 {
@include my-mixin(1, 2, (), 6, 7);
}
生成的 CSS 代碼：
CSS Code復制內(nèi)容到剪貼板
.test {
specific: 4, 5;
}
.test, .test2, .test3 {
common: 1, 2, ();
}
.test2 {
specific: ();
}
.test3 {
specific: 6, 7;
}
混合宏靈活傳參的秘技——Null
在 Sass 混合宏中，我們可以向其傳遞參數(shù)列表，便于快速地配置相關(guān)屬性。就比如下面的這個混合宏，其中就包含了四個參數(shù)，用于定義元素的 display，padding 和 margin。
CSS Code復制內(nèi)容到剪貼板
@mixin display ($disp, $padding, $l-margin, $r-margin) {
display: $disp;
padding: $padding;
margin-left: $l-margin;
margin-right: $r-margin;
}
當我們調(diào)用這個混合宏時，必須為每個參數(shù)傳遞一個合理的值，否則就會出現(xiàn)錯誤提示。
這往往強迫開發(fā)者為非必須的變量傳值，甚至重置非必要的初始值。那么，怎樣才能避免必須為每一個變量傳值呢？
混合宏中的可選參數(shù)
如果我們?yōu)閰?shù)提供默認值，那么這個參數(shù)就成為了可選參數(shù)：
@mixin display ($disp, $padding:0, $l-margin:0, $r-margin:0) {
…
}
如此一來，再次調(diào)用該混合宏時，$padding，$l-margin 和 r-margin 參數(shù)就成為了可選參數(shù)。但是，此時又會造成另一種問題：使用默認參數(shù)的混合宏有時生成的樣式并不是精簡的，和開發(fā)者的想法相比會有一些冗余，甚至是大量的重復性代碼。
Null
好消息是，Sass 支持 null，這有助于大大改善混合宏中可選參數(shù)的使用體驗。
通過使用 null，就可以排除掉某些樣式，不會生成到最終的 CSS 樣式中，除非我們調(diào)用混合宏時為其賦值。讓我們使用 null 作為默認值來重寫上面的混合宏：
CSS Code復制內(nèi)容到剪貼板
@mixin display (
$disp,
$padding: null,
$r-margin: null,
$l-margin: null) {
display: $disp;
padding: $padding;
margin-left: $l-margin;
margin-right: $r-margin;
}
這種使用方式太完美了！我們現(xiàn)在仍然可以定義任意的可選參數(shù)，而又不會生成冗余的 CSS 代碼。如果你傳遞給混合宏兩個參數(shù)，那么它就只會生成相應(yīng)的 CSS 樣式。
CSS Code復制內(nèi)容到剪貼板
.nav__item {
@include display(inline-block, $l-margin: 20px);
}
運算中的 null
一定要牢記，在運算中使用 null 將會拋出錯誤。舉例如下：
CSS Code復制內(nèi)容到剪貼板
@mixin display (
$disp,
$padding: null,
$l-margin: null) {
display: $disp;
padding: $padding;
margin-left: $l-margin;
margin-bottom: $l-margin * 2;
}
.nav__link {
@include display(inline-block, 10px);
}
這將返回一條錯誤提示：Invalid null operation: “null times 2“。原因就是因為 $l-margin 未定義，繼而無法進行一切數(shù)值運算。
由此可見，Sass 的 null 對混合宏的冗余輸出具有強大的療效。
感謝各位的閱讀，以上就是“CSS的Sass框架中混合宏的使用”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對CSS的Sass框架中混合宏的使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
