欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

W3Cplus   發(fā)布時(shí)間：2016-03-08 11:06:18   作者：南北   我要評(píng)論
這篇文章主要介紹了CSS的Sass框架中混合宏的使用,文中對(duì)混合宏所支持的參數(shù)特別是Null參數(shù)有較為詳細(xì)的講解,需要的朋友可以參考下

我所探討的焦點(diǎn)在 map 這種數(shù)據(jù)類型上，特別是使用 @content，@at-root 和 unique-id() 等指令合并 maps 所實(shí)現(xiàn)的奇妙方法。其中之一就是混合宏的設(shè)計(jì)模式，這一設(shè)計(jì)模式通過(guò)使用 @extend 指令和占位符選擇器來(lái)解決 Sass 的一些實(shí)際問(wèn)題：

由于常在代碼開(kāi)始部分引入占位符擴(kuò)展，所以就應(yīng)該將其置于代碼頂部而不受其他因素所影響；
優(yōu)先使用 @include 還是 @extend？這里給出的答案是 @include。
自意識(shí)混合宏的核心是通過(guò)創(chuàng)建或擴(kuò)展占位符選擇器，動(dòng)態(tài)地生成相關(guān)樣式。當(dāng)它第一次被傳參調(diào)用后，就會(huì)有一個(gè) map 變量記錄下相關(guān)的參數(shù)。隨后，當(dāng)再次使用相同的參數(shù)調(diào)用時(shí)，就會(huì)執(zhí)行擴(kuò)展同一占位符的操作，而不是生成重復(fù)代碼。

在下面的代碼中，有一些混合宏的參數(shù)是相同的，有一些參數(shù)是獨(dú)有或特定的。那么在最終生成的 CSS 中，就會(huì)發(fā)現(xiàn)，具有相同參數(shù)的部分會(huì)使用擴(kuò)展的方式，即合并選擇器的方式；具有獨(dú)特或特定參數(shù)的部分，則仍然會(huì)生成獨(dú)立的選擇器樣式。

SCSS 源代碼和測(cè)試數(shù)據(jù)：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. // 自意識(shí)混合宏示例   
  2.   
  3. // 定義全局 map，保存混合宏的相關(guān)信息   
  4. $my-mixin-info: ();   
  5.   
  6. // 使用任意形式的參數(shù)定義混合宏   
  7. @mixin my-mixin($pos1, $pos2, $map: (), $rest…) {   
  8.   
  9.   // 根據(jù)需要，捕獲部分或全部參數(shù)   
  10.   $my-args: ($pos1, $pos2, $map);   
  11.   
  12.     // 在全局 map 中通過(guò) key($my-args) 查找這些參數(shù)   
  13.   $id: map-get($my-mixin-info, $my-args);   
  14.   
  15.   // 如果找到了 id   
  16.   @if $id {    
  17.   
  18.     // 擴(kuò)展該 id   
  19.     @extend %#{$id};    
  20.   
  21.     // 生成任意特定的樣式   
  22.     specific: inspect($rest);   
  23.   }   
  24.   
  25.   // 否則   
  26.   @else {   
  27.   
  28.     // 新建一個(gè) id   
  29.     $id: unique-id();   
  30.   
  31.         // 將該 id 整合入混合宏的 map 中   
  32.     $my-mixin-info: map-merge($my-mixin-info, ($my-args: $id)) !global;   
  33.   
  34.         // 在樣式頂層生成占位符   
  35.     @at-root {   
  36.       %#{$id} {   
  37.   
  38.         // 生成共有樣式   
  39.         common: inspect($my-args);   
  40.       }       
  41.     }   
  42.   
  43.     // 擴(kuò)展該占位符   
  44.     @extend %#{$id};   
  45.   
  46.     // 生成任意特定的樣式   
  47.     specific: inspect($rest);   
  48.   }   
  49. }   
  50.   
  51. .test {   
  52.   @include my-mixin(1, 2, (), 4, 5);   
  53. }   
  54.   
  55. .test2 {   
  56.   @include my-mixin(1, 2);   
  57. }   
  58.   
  59. .test3 {   
  60.   @include my-mixin(1, 2, (), 6, 7);   
  61. }  

生成的 CSS 代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .test {   
  2.   specific: 4, 5;   
  3. }   
  4. .test, .test2, .test3 {   
  5.   common: 1, 2, ();   
  6. }   
  7.   
  8. .test2 {   
  9.   specific: ();   
  10. }   
  11.   
  12. .test3 {   
  13.   specific: 6, 7;   
  14. }  

混合宏靈活傳參的秘技——Null

在 Sass 混合宏中，我們可以向其傳遞參數(shù)列表，便于快速地配置相關(guān)屬性。就比如下面的這個(gè)混合宏，其中就包含了四個(gè)參數(shù)，用于定義元素的 display，padding 和 margin。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @mixin display ($disp, $padding, $l-margin, $r-margin) {   
  2.   display: $disp;   
  3.   padding: $padding;   
  4.   margin-left: $l-margin;   
  5.   margin-right: $r-margin;   
  6. }  

當(dāng)我們調(diào)用這個(gè)混合宏時(shí)，必須為每個(gè)參數(shù)傳遞一個(gè)合理的值，否則就會(huì)出現(xiàn)錯(cuò)誤提示。

這往往強(qiáng)迫開(kāi)發(fā)者為非必須的變量傳值，甚至重置非必要的初始值。那么，怎樣才能避免必須為每一個(gè)變量傳值呢？

混合宏中的可選參數(shù)

如果我們?yōu)閰?shù)提供默認(rèn)值，那么這個(gè)參數(shù)就成為了可選參數(shù)：

@mixin display ($disp, $padding:0, $l-margin:0, $r-margin:0) {
  …
}
如此一來(lái)，再次調(diào)用該混合宏時(shí)，$padding，$l-margin 和 r-margin 參數(shù)就成為了可選參數(shù)。但是，此時(shí)又會(huì)造成另一種問(wèn)題：使用默認(rèn)參數(shù)的混合宏有時(shí)生成的樣式并不是精簡(jiǎn)的，和開(kāi)發(fā)者的想法相比會(huì)有一些冗余，甚至是大量的重復(fù)性代碼。

Null

好消息是，Sass 支持 null，這有助于大大改善混合宏中可選參數(shù)的使用體驗(yàn)。

通過(guò)使用 null，就可以排除掉某些樣式，不會(huì)生成到最終的 CSS 樣式中，除非我們調(diào)用混合宏時(shí)為其賦值。讓我們使用 null 作為默認(rèn)值來(lái)重寫(xiě)上面的混合宏：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @mixin display (   
  2.   $disp,    
  3.   $padding: null,    
  4.   $r-margin: null,   
  5.   $l-margin: null) {   
  6.     display: $disp;   
  7.     padding: $padding;   
  8.     margin-left: $l-margin;   
  9.     margin-right: $r-margin;   
  10. }  

這種使用方式太完美了！我們現(xiàn)在仍然可以定義任意的可選參數(shù)，而又不會(huì)生成冗余的 CSS 代碼。如果你傳遞給混合宏兩個(gè)參數(shù)，那么它就只會(huì)生成相應(yīng)的 CSS 樣式。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .nav__item {   
  2.   @include display(inline-block, $l-margin: 20px);   
  3. }  

運(yùn)算中的 null

一定要牢記，在運(yùn)算中使用 null 將會(huì)拋出錯(cuò)誤。舉例如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @mixin display (   
  2.   $disp,    
  3.   $padding: null,    
  4.   $l-margin: null) {   
  5.     display: $disp;   
  6.     padding: $padding;   
  7.     margin-left: $l-margin;   
  8.     margin-bottom: $l-margin * 2;   
  9. }   
  10.   
  11. .nav__link {   
  12.   @include display(inline-block, 10px);   
  13. }  

這將返回一條錯(cuò)誤提示：Invalid null operation: “null times 2“。原因就是因?yàn)?$l-margin 未定義，繼而無(wú)法進(jìn)行一切數(shù)值運(yùn)算。

由此可見(jiàn)，Sass 的 null 對(duì)混合宏的冗余輸出具有強(qiáng)大的療效。

相關(guān)文章

最新評(píng)論