主页 > 网站建设 >

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

网站建设 2023-01-28 21:38www.1681989.com免费网站

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

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

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

SCSS 源代码和测试数据

CSS Code复制内容到剪贴板
  1. // 自意识混合宏示例   
  2.   
  3. // 定义全局 map，保存混合宏的相关信息   
  4. $my-mix-fo: ();   
  5.   
  6. // 使用任意形式的参数定义混合宏   
  7. @mix my-mix($pos1, $pos2, $map: (), $rest…) {   
  8.   
  9.   // 根据需要，捕获部分或全部参数   
  10.   $my-args: ($pos1, $pos2, $map);   
  11.   
  12.     // 在全局 map 中通过 key($my-args) 查找这些参数   
  13.   $id: map-get($my-mix-fo, $my-args);   
  14.   
  15.   // 如果找到了 id   
  16.   @if $id {    
  17.   
  18.     // 扩展该 id   
  19.     @extend %#{$id};    
  20.   
  21.     // 生成任意特定的样式   
  22.     specific: spect($rest);   
  23.   }   
  24.   
  25.   // 否则   
  26.   @else {   
  27.   
  28.     // 新建一个 id   
  29.     $id: unique-id();   
  30.   
  31.         // 将该 id 整合入混合宏的 map 中   
  32.     $my-mix-fo: map-merge($my-mix-fo, ($my-args: $id)) !global;   
  33.   
  34.         // 在样式顶层生成占位符   
  35.     @at-root {   
  36.       %#{$id} {   
  37.   
  38.         // 生成共有样式   
  39.         mon: spect($my-args);   
  40.       }       
  41.     }   
  42.   
  43.     // 扩展该占位符   
  44.     @extend %#{$id};   
  45.   
  46.     // 生成任意特定的样式   
  47.     specific: spect($rest);   
  48.   }   
  49. }   
  50.   
  51. .test {   
  52.   @clude my-mix(1, 2, (), 4, 5);   
  53. }   
  54.   
  55. .test2 {   
  56.   @clude my-mix(1, 2);   
  57. }   
  58.   
  59. .test3 {   
  60.   @clude my-mix(1, 2, (), 6, 7);   
  61. }  

生成的 CSS 代码

CSS Code复制内容到剪贴板
  1. .test {   
  2.   specific: 4, 5;   
  3. }   
  4. .test, .test2, .test3 {   
  5.   mon: 1, 2, ();   
  6. }   
  7.   
  8. .test2 {   
  9.   specific: ();   
  10. }   
  11.   
  12. .test3 {   
  13.   specific: 6, 7;   
  14. }  

混合宏灵活传参的秘技——Null

在 Sass 混合宏中，我们可以向其传递参数列表，便于快速地配置相关属性。就比如狼蚁网站SEO优化的这个混合宏，其中就包含了四个参数，用于定义元素的 display，paddg 和 marg。

CSS Code复制内容到剪贴板
  1. @mix display ($disp, $paddg, $l-marg, $r-marg) {   
  2.   display: $disp;   
  3.   paddg: $paddg;   
  4.   marg-left: $l-marg;   
  5.   marg-right: $r-marg;   
  6. }  

当我们调用这个混合宏时，必须为每个参数传递一个合理的值，否则就会出现错误提示。

这往往强迫开发者为非必须的变量传值，甚至重置非必要的初始值。那么，怎样才能避免必须为每一个变量传值呢？

混合宏中的可选参数

如果我们为参数提供默认值，那么这个参数就成为了可选参数

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

Null

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

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

CSS Code复制内容到剪贴板
  1. @mix display (   
  2.   $disp,    
  3.   $paddg: null,    
  4.   $r-marg: null,   
  5.   $l-marg: null) {   
  6.     display: $disp;   
  7.     paddg: $paddg;   
  8.     marg-left: $l-marg;   
  9.     marg-right: $r-marg;   
  10. }  

这种使用方式太完美了！我们现在仍然可以定义任意的可选参数，而又不会生成冗余的 CSS 代码。如果你传递给混合宏两个参数，那么它就只会生成相应的 CSS 样式。

CSS Code复制内容到剪贴板
  1. .nav__item {   
  2.   @clude display(le-block, $l-marg: 20px);   
  3. }  

运算中的 null

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

CSS Code复制内容到剪贴板
  1. @mix display (   
  2.   $disp,    
  3.   $paddg: null,    
  4.   $l-marg: null) {   
  5.     display: $disp;   
  6.     paddg: $paddg;   
  7.     marg-left: $l-marg;   
  8.     marg-bottom: $l-marg  2;   
  9. }   
  10.   
  11. .nav__lk {   
  12.   @clude display(le-block, 10px);   
  13. }  

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

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

上一篇：CSS的Sass框架中常用的操作符的使用教程 下一篇：基于CSS制作天蓝色导航菜单

网站设计

Copyright © 2016-2025 www.1681989.com 推火网 版权所有 Power by