深入解析CSS的Sass框架中混合宏的使用

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 深入解析CSS的Sass框架中混合宏的使用

編輯：CSS詳解

這篇文章主要介紹了CSS的Sass框架中混合宏的使用,文中對混合宏所支持的參數特別是Null參數有較為詳細的講解,需要的朋友可以參考下

我所探討的焦點在 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復制內容到剪貼板