溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“CSS的Sass框架中混合宏的使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS的Sass框架中混合宏的使用”吧！
我所探討的焦點在 map 這種數據類型上，特別是使用 @content，@at-root 和 unique-id() 等指令合并 maps 所實現的奇妙方法。其中之一就是混合宏的設計模式，這一設計模式通過使用 @extend 指令和占位符選擇器來解決 Sass 的一些實際問題：
由于常在代碼開始部分引入占位符擴展，所以就應該將其置于代碼頂部而不受其他因素所影響；
優先使用 @include 還是 @extend？這里給出的答案是 @include。
自意識混合宏的核心是通過創建或擴展占位符選擇器，動態地生成相關樣式。當它第一次被傳參調用后，就會有一個 map 變量記錄下相關的參數。隨后，當再次使用相同的參數調用時，就會執行擴展同一占位符的操作，而不是生成重復代碼。
在下面的代碼中，有一些混合宏的參數是相同的，有一些參數是獨有或特定的。那么在最終生成的 CSS 中，就會發現，具有相同參數的部分會使用擴展的方式，即合并選擇器的方式；具有獨特或特定參數的部分，則仍然會生成獨立的選擇器樣式。
SCSS 源代碼和測試數據：
CSS Code復制內容到剪貼板
// 自意識混合宏示例
// 定義全局 map，保存混合宏的相關信息
$my-mixin-info: ();
// 使用任意形式的參數定義混合宏
@mixin my-mixin($pos1, $pos2, $map: (), $rest…) {
// 根據需要，捕獲部分或全部參數
$my-args: ($pos1, $pos2, $map);
// 在全局 map 中通過 key($my-args) 查找這些參數
$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復制內容到剪貼板
.test {
specific: 4, 5;
}
.test, .test2, .test3 {
common: 1, 2, ();
}
.test2 {
specific: ();
}
.test3 {
specific: 6, 7;
}
混合宏靈活傳參的秘技——Null
在 Sass 混合宏中，我們可以向其傳遞參數列表，便于快速地配置相關屬性。就比如下面的這個混合宏，其中就包含了四個參數，用于定義元素的 display，padding 和 margin。
CSS Code復制內容到剪貼板
@mixin display ($disp, $padding, $l-margin, $r-margin) {
display: $disp;
padding: $padding;
margin-left: $l-margin;
margin-right: $r-margin;
}
當我們調用這個混合宏時，必須為每個參數傳遞一個合理的值，否則就會出現錯誤提示。
這往往強迫開發者為非必須的變量傳值，甚至重置非必要的初始值。那么，怎樣才能避免必須為每一個變量傳值呢？
混合宏中的可選參數
如果我們為參數提供默認值，那么這個參數就成為了可選參數：
@mixin display ($disp, $padding:0, $l-margin:0, $r-margin:0) {
…
}
如此一來，再次調用該混合宏時，$padding，$l-margin 和 r-margin 參數就成為了可選參數。但是，此時又會造成另一種問題：使用默認參數的混合宏有時生成的樣式并不是精簡的，和開發者的想法相比會有一些冗余，甚至是大量的重復性代碼。
Null
好消息是，Sass 支持 null，這有助于大大改善混合宏中可選參數的使用體驗。
通過使用 null，就可以排除掉某些樣式，不會生成到最終的 CSS 樣式中，除非我們調用混合宏時為其賦值。讓我們使用 null 作為默認值來重寫上面的混合宏：
CSS Code復制內容到剪貼板
@mixin display (
$disp,
$padding: null,
$r-margin: null,
$l-margin: null) {
display: $disp;
padding: $padding;
margin-left: $l-margin;
margin-right: $r-margin;
}
這種使用方式太完美了！我們現在仍然可以定義任意的可選參數，而又不會生成冗余的 CSS 代碼。如果你傳遞給混合宏兩個參數，那么它就只會生成相應的 CSS 樣式。
CSS Code復制內容到剪貼板
.nav__item {
@include display(inline-block, $l-margin: 20px);
}
運算中的 null
一定要牢記，在運算中使用 null 將會拋出錯誤。舉例如下：
CSS Code復制內容到剪貼板
@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 未定義，繼而無法進行一切數值運算。
由此可見，Sass 的 null 對混合宏的冗余輸出具有強大的療效。
感謝各位的閱讀，以上就是“CSS的Sass框架中混合宏的使用”的內容了，經過本文的學習后，相信大家對CSS的Sass框架中混合宏的使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
