我所探討的焦點在 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;
|
新聞熱點
疑難解答