我所探讨的焦点在 map 这种数据类型上,特别是使用 @content,@at-root 和 unique-id() 等指令合并 maps 所实现的奇妙方法。其中之一就是混合宏的设计模式,这一设计模式通过使用 @extend 指令和占位符选择器来解决 Sass 的一些实际问题:
由于常在代码开始部分引入占位符扩展,所以就应该将其置于代码顶部而不受其他因素所影响;
优先使用 @include 还是 @extend?这里给出的答案是 @include。
自意识混合宏的核心是通过创建或扩展占位符选择器,动态地生成相关样式。当它第一次被传参调用后,就会有一个 map 变量记录下相关的参数。随后,当再次使用相同的参数调用时,就会执行扩展同一占位符的操作,而不是生成重复代码。
在下面的代码中,有一些混合宏的参数是相同的,有一些参数是独有或特定的。那么在最终生成的 CSS 中,就会发现,具有相同参数的部分会使用扩展的方式,即合并选择器的方式;具有独特或特定参数的部分,则仍然会生成独立的选择器样式。
SCSS 源代码和测试数据:
- //自意识混合宏示例
- //定义全局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 代码:
- .test{
- specific:4,5;
- }
- .test,.test2,.test3{
- common:1,2,();
- }
- .test2{
- specific:();
- }
- .test3{
- specific:6,7;
- }
混合宏灵活传参的秘技——Null
在 Sass 混合宏中,我们可以向其传递参数列表,便于快速地配置相关属性。就比如下面的这个混合宏,其中就包含了四个参数,用于定义元素的 display,padding 和 margin。
- @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 作为默认值来重写上面的混合宏:
- @mixindisplay(
- $disp,
- $padding:null,
- $r-margin:null,
- $l-margin:null){
- display:$disp;
- padding:$padding;
- margin-left:$l-margin;
- margin-right:$r-margin;
- }
这种使用方式太完美了!我们现在仍然可以定义任意的可选参数,而又不会生成冗余的 CSS 代码。如果你传递给混合宏两个参数,那么它就只会生成相应的 CSS 样式。
- .nav__item{
- @includedisplay(inline-block,$l-margin:20px);
- }
运算中的 null
一定要牢记,在运算中使用 null 将会抛出错误。举例如下:
- @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 对混合宏的冗余输出具有强大的疗效。
到此这篇关于深入解析CSS的Sass框架中混合宏的如何使用就介绍到这了。没有哪一种胭脂能涂抹时间,没有哪一件服装能掩饰灵魂,没有哪一套古籍能装潢空虚。更多相关深入解析CSS的Sass框架中混合宏的如何使用内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!