我所探讨的焦点在 map 这种数据类型上，特别是使用 @content，@at-root 和 unique-id() 等指令合并 maps 所实现的奇妙方法。其中之一就是混合宏的设计模式，这一设计模式通过使用 @extend 指令和占位符选择器来解决 Sass 的一些实际问题：

由于常在代码开始部分引入占位符扩展，所以就应该将其置于代码顶部而不受其他因素所影响；

优先使用 @include 还是 @extend？这里给出的答案是 @include。

自意识混合宏的核心是通过创建或扩展占位符选择器，动态地生成相关样式。当它第一次被传参调用后，就会有一个 map 变量记录下相关的参数。随后，当再次使用相同的参数调用时，就会执行扩展同一占位符的操作，而不是生成重复代码。

在下面的代码中，有一些混合宏的参数是相同的，有一些参数是独有或特定的。那么在最终生成的 CSS 中，就会发现，具有相同参数的部分会使用扩展的方式，即合并选择器的方式；具有独特或特定参数的部分，则仍然会生成独立的选择器样式。

SCSS 源代码和测试数据：

CSS Code复制内容到剪贴板 //自意识混合宏示例 //定义全局map，保存混合宏的相关信息 $my-mixin-info:(); //使用任意形式的参数定义混合宏 @mixinmy-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{ @includemy-mixin(1,2,(),4,5); } .test2{ @includemy-mixin(1,2); } .test3{ @includemy-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复制内容到剪贴板 @mixindisplay($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复制内容到剪贴板 @mixindisplay( $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{ @includedisplay(inline-block,$l-margin:20px); }

运算中的 null

一定要牢记，在运算中使用 null 将会抛出错误。举例如下：

CSS Code复制内容到剪贴板 @mixindisplay( $disp, $padding:null, $l-margin:null){ display:$disp; padding:$padding; margin-left:$l-margin; margin-bottom:$l-margin*2; } .nav__link{ @includedisplay(inline-block,10px); }

这将返回一条错误提示：Invalid null operation: “null times 2“。原因就是因为 $l-margin 未定义，继而无法进行一切数值运算。

由此可见，Sass 的 null 对混合宏的冗余输出具有强大的疗效。