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

@mixin display ($disp, $padding:0, $l-margin:0, $r-margin:0) {
  …
}
如此一来，再次调用该混合宏时，$padding，$l-margin 和 r-margin 参数就成为了可选参数。但是，此时又会造成另一种问题：使用默认参数的混合宏有时生成的样式并不是精简的，和开发者的想法相比会有一些冗余，甚至是大量的重复性代码。

Null

好消息是，Sass 支持 null，这有助于大大改善混合宏中可选参数的使用体验。

通过使用 null，就可以排除掉某些样式，不会生成到最终的 CSS 样式中，除非我们调用混合宏时为其赋值。让我们使用 null 作为默认值来重写上面的混合宏：

CSS Code复制内容到剪贴板

@mixin display (   
  $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 {   
  @include display(inline-block, $l-margin: 20px);   
}  

运算中的 null

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

CSS Code复制内容到剪贴板

@mixin display (   
  $disp,    
  $padding: null,    
  $l-margin: null) {   
    display: $disp;   
    padding: $padding;   
    margin-left: $l-margin;   
    margin-bottom: $l-margin * 2;   
}   
  
.nav__link {   
  @include display(inline-block, 10px);   
}  

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

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