深层次分析CSS的Sass架构中混和宏的应用

日期：2021-03-04 类型：科技新闻 

关键词：小游戏源代码，互动小游戏微信，自制小游戏，html5游戏，制作游戏大概多少钱

我所讨论的聚焦点在 map 这类数据信息种类上，非常是应用 @content，@at-root 和 unique-id() 等命令合拼 maps 所完成的奇特方式。在其中之1便是混和宏的设计方案方式，这1设计方案方式根据应用 @extend 命令和占位符挑选器来处理 Sass 的1些具体难题：

因为常在编码刚开始一部分引进占位符拓展，因此就应当将其置于编码顶部而不会受到别的要素所危害；
优先选择应用 @include 還是 @extend？这里得出的回答是 @include。
自观念混和宏的关键是根据建立或拓展占位符挑选器，动态性地转化成有关款式。当它第1次被传参启用后，就会有1个 map 自变量纪录下有关的主要参数。接着，当再度应用同样的主要参数启用时，就会实行拓展同1占位符的实际操作，而并不是转化成反复编码。

在下面的编码中，有1些混和宏的主要参数是同样的，有1些主要参数是特有或特殊的。那末在最后转化成的 CSS 中，就会发现，具备同样主要参数的一部分会应用拓展的方法，即合拼挑选器的方法；具备与众不同或特殊主要参数的一部分，则依然会转化成单独的挑选器款式。

SCSS 源码和检测数据信息：

CSS Code拷贝內容到剪贴板
  1. // 自观念混和宏示例   
  2.   
  3. // 界定全局性 map，储存混和宏的有关信息内容   
  4. $my-mixin-info: ();   
  5.   
  6. // 应用随意方式的主要参数界定混和宏   
  7. @mixin my-mixin($pos1, $pos2, $map: (), $rest…) {   
  8.   
  9.   // 依据必须，捕捉一部分或所有主要参数   
  10.   $my-args: ($pos1, $pos2, $map);   
  11.   
  12.     // 在全局性 map 中根据 key($my-args) 搜索这些主要参数   
  13.   $id: map-get($my-mixin-info, $my-args);   
  14.   
  15.   // 假如寻找了 id   
  16.   @if $id {    
  17.   
  18.     // 拓展该 id   
  19.     @extend %#{$id};    
  20.   
  21.     // 转化成随意特殊的款式   
  22.     specific: inspect($rest);   
  23.   }   
  24.   
  25.   // 不然   
  26.   @else {   
  27.   
  28.     // 新建1个 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.     // 拓展该占位符   
  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拷贝內容到剪贴板
  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 混和宏中，大家能够向其传送主要参数目录，便于迅速地配备有关特性。就例如下面的这个混和宏，在其中就包括了4个主要参数，用于界定元素的 display，padding 和 margin。

CSS Code拷贝內容到剪贴板
  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. }  

当大家启用这个混和宏时，务必为每一个主要参数传送1个有效的值，不然就会出現不正确提醒。

这常常逼迫开发设计者为非务必的自变量传值，乃至重设非必要的原始值。那末，如何才可以防止务必为每个自变量传值呢？

混和宏中的可选主要参数

假如大家为主要参数出示默认设置值，那末这个主要参数就变成了可选主要参数：

@mixin display ($disp, $padding:0, $l-margin:0, $r-margin:0) {
  …
}
这般1来，再度启用该混和宏时，$padding，$l-margin 和 r-margin 主要参数就变成了可选主要参数。可是，此时又会导致另外一种难题：应用默认设置主要参数的混和宏有时转化成的款式其实不是精简的，和开发设计者的念头相比会有1些冗余，乃至是很多的反复性编码。

Null

好信息是，Sass 适用 null，这有助于大大改进混和宏中可选主要参数的应用体验。

根据应用 null，便可以清除掉一些款式，不容易转化成到最后的 CSS 款式中，除非大家启用混和宏时为其取值。让大家应用 null 做为默认设置值来重新写过上面的混和宏：

CSS Code拷贝內容到剪贴板
  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. }  

这类应用方法太完善了！大家如今依然能够界定随意的可选主要参数，而又不容易转化成冗余的 CSS 编码。假如你传送给混和宏两个主要参数，那末它就只会转化成相应的 CSS 款式。

CSS Code拷贝內容到剪贴板
  1. .nav__item {   
  2.   @include display(inline-block, $l-margin: 20px);   
  3. }  

运算中的 null

1定要铭记，在运算中应用 null 可能抛错误误。举比如下：

CSS Code拷贝內容到剪贴板
  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. }  

这将回到1条不正确提醒：Invalid null operation: “null times 2“。缘故便是由于 $l-margin 待定义，继而没法开展1切标值运算。

不难看出，Sass 的 null 对混和宏的冗余輸出具备强劲的疗效。

上一篇：CSS撰写时的高特性和高维护保养性编码提升提议 返回下一篇：没有了