【SCSS进阶】4、高级混合宏和占位符选择器

【SCSS进阶】高级混合宏和占位符选择器

系列文章目录

【SCSS进阶】1、控制指令（@if、@for、@each、@while）
【SCSS进阶】2、高级变量和数据结构（列表、映射）
【SCSS进阶】3、深度嵌套和模块化设计
【SCSS进阶】4、高级混合宏和占位符选择器（本文）
【SCSS进阶】5、自定义函数
【SCSS进阶】6、CSS网格和Flexbox布局
【SCSS进阶】7、响应式设计和媒体查询
【SCSS进阶】8、优化和压缩SCSS代码
【SCSS进阶】9、与PostCSS、Autoprefixer等工具的集成
【SCSS进阶】10、最佳实践和性能优化

在前面的文章中，我们学习了SCSS中的深度嵌套和模块化设计。本章将深入探讨SCSS中的高级混合宏和占位符选择器，帮助你编写更加灵活和复用性强的样式代码。

高级混合宏（Mixins）

混合宏（Mixins）是SCSS中最强大的特性之一，允许你定义可复用的样式块。高级混合宏不仅可以接受参数，还可以包括条件逻辑和循环，使其功能更加丰富和灵活。

参数化混合宏

混合宏可以接受参数，使其更加灵活和动态。你可以为参数设置默认值，确保在未提供参数时使用默认值。

示例：参数化混合宏

@mixin border-radius($radius: 5px) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box {
  @include border-radius; // 使用默认值 5px
}

.card {
  @include border-radius(10px); // 使用提供的值 10px
}

编译后的CSS代码：

.box {
   
   
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
      -ms-border-radius: 5px;
          border-radius: 5px;
}

.card {
   
   
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
      -ms-border-radius: 10px;
          border-radius: 10px;
}

可变参数的混合宏

SCSS支持可变参数的混合宏，这意味着你可以传递任意数量的参数，并在混合宏内部使用这些参数。

示例：可变参数的混合宏

@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow;
     -moz-box-shadow: $shadow;
          box-shadow: $shadow;
}

.card {
  @include box-shadow(0 0 5px rgba(0, 0, 0, 0.3));
}

.panel {
  @include box-shadow(0 0 10px rgba(0, 0, 0, 0.5), inset 0 0 5px rgba(255, 255, 255, 0.3));
}

编译后的CSS代码：

.card {
   
   
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.panel {
   
   
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), inset 0 0 5px rgba(255, 255, 255, 0.3