千家信息网

CSS的Sass框架中混合宏的使用

发表于:2025-01-17 作者:千家信息网编辑
千家信息网最后更新 2025年01月17日,这篇文章主要讲解了"CSS的Sass框架中混合宏的使用",文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习"CSS的Sass框架中混合宏的使用"吧!我所探讨的
千家信息网最后更新 2025年01月17日CSS的Sass框架中混合宏的使用

这篇文章主要讲解了"CSS的Sass框架中混合宏的使用",文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习"CSS的Sass框架中混合宏的使用"吧!

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

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

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

SCSS 源代码和测试数据:

CSS Code复制内容到剪贴板

  1. // 自意识混合宏示例

  2. // 定义全局 map,保存混合宏的相关信息

  3. $my-mixin-info: ();

  4. // 使用任意形式的参数定义混合宏

  5. @mixin my-mixin($pos1, $pos2, $map: (), $rest…) {

  6. // 根据需要,捕获部分或全部参数

  7. $my-args: ($pos1, $pos2, $map);

  8. // 在全局 map 中通过 key($my-args) 查找这些参数

  9. $id: map-get($my-mixin-info, $my-args);

  10. // 如果找到了 id

  11. @if $id {

  12. // 扩展该 id

  13. @extend %#{$id};

  14. // 生成任意特定的样式

  15. specific: inspect($rest);

  16. }

  17. // 否则

  18. @else {

  19. // 新建一个 id

  20. $id: unique-id();

  21. // 将该 id 整合入混合宏的 map 中

  22. $my-mixin-info: map-merge($my-mixin-info, ($my-args: $id)) !global;

  23. // 在样式顶层生成占位符

  24. @at-root {

  25. %#{$id} {

  26. // 生成共有样式

  27. common: inspect($my-args);

  28. }

  29. }

  30. // 扩展该占位符

  31. @extend %#{$id};

  32. // 生成任意特定的样式

  33. specific: inspect($rest);

  34. }

  35. }

  36. .test {

  37. @include my-mixin(1, 2, (), 4, 5);

  38. }

  39. .test2 {

  40. @include my-mixin(1, 2);

  41. }

  42. .test3 {

  43. @include my-mixin(1, 2, (), 6, 7);

  44. }

生成的 CSS 代码:

CSS Code复制内容到剪贴板

  1. .test {

  2. specific: 4, 5;

  3. }

  4. .test, .test2, .test3 {

  5. common: 1, 2, ();

  6. }

  7. .test2 {

  8. specific: ();

  9. }

  10. .test3 {

  11. specific: 6, 7;

  12. }

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

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

CSS Code复制内容到剪贴板

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

  2. display: $disp;

  3. padding: $padding;

  4. margin-left: $l-margin;

  5. margin-right: $r-margin;

  6. }

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

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

混合宏中的可选参数

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

@mixin display ($disp, $padding:0, $l-margin:0, $r-margin:0) {

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

Null

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

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

CSS Code复制内容到剪贴板

  1. @mixin display (

  2. $disp,

  3. $padding: null,

  4. $r-margin: null,

  5. $l-margin: null) {

  6. display: $disp;

  7. padding: $padding;

  8. margin-left: $l-margin;

  9. margin-right: $r-margin;

  10. }

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

CSS Code复制内容到剪贴板

  1. .nav__item {

  2. @include display(inline-block, $l-margin: 20px);

  3. }

运算中的 null

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

CSS Code复制内容到剪贴板

  1. @mixin display (

  2. $disp,

  3. $padding: null,

  4. $l-margin: null) {

  5. display: $disp;

  6. padding: $padding;

  7. margin-left: $l-margin;

  8. margin-bottom: $l-margin * 2;

  9. }

  10. .nav__link {

  11. @include display(inline-block, 10px);

  12. }

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

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

感谢各位的阅读,以上就是"CSS的Sass框架中混合宏的使用"的内容了,经过本文的学习后,相信大家对CSS的Sass框架中混合宏的使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是,小编将为大家推送更多相关知识点的文章,欢迎关注!

0