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

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

由于常在代码开始部分引入占位符扩展，所以就应该将其置于代码顶部而不受其他因素所影响；
优先使用 @include 还是 @extend？这里给出的答案是 @include。
自意识混合宏的核心是通过创建或扩展占位符选择器，动态地生成相关样式。当它第一次被传参调用后，就会有一个 map 变量记录下相关的参数。随后，当再次使用相同的参数调用时，就会执行扩展同一占位符的操作，而不是生成重复代码。

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

SCSS 源代码和测试数据：

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.     // 新建一个 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 代码：

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 混合宏中，我们可以向其传递参数列表，便于快速地配置相关属性。就比如下面的这个混合宏，其中就包含了四个参数，用于定义元素的 display，padding 和 margin。

1. @mixin display ($disp, $padding, $l-margin, $r-margin) {   
2.   display