SASS如何将.box-shadow与.card-box-shadow .pagebuilder-column合并至同一声明

完全可以通过自定义Mixin实现需求，既能避免重复编写选择器，又能保证编译后的CSS将两个系列的选择器合并到同一个声明里。

步骤1：定义核心Mixin #

写一个接收阴影名称和阴影值的Mixin，内部同时包含两个需要合并的选择器：

@mixin box-shadow($name, $shadow-value) {
  .box-shadow-#{$name},
  .card-box-shadow .pagebuilder-column.box-shadow-#{$name} {
    box-shadow: $shadow-value;
    // 如果需要额外统一属性（比如过渡效果），直接加在这里即可
    // transition: box-shadow 0.3s ease;
  }
}

步骤2：调用Mixin生成样式 #

只需通过@include调用Mixin，传入不同的阴影名称和对应值：

// 生成小尺寸阴影
@include box-shadow(sm, 0 2px 4px rgba(0, 0, 0, 0.1));
// 生成中等尺寸阴影
@include box-shadow(md, 0 4px 8px rgba(0, 0, 0, 0.15));
// 生成大尺寸阴影
@include box-shadow(lg, 0 8px 16px rgba(0, 0, 0, 0.2));

编译后的CSS效果 #

编译后的CSS会自动把两个关联选择器合并到同一个规则中，和手动编写的效果完全一致：

.box-shadow-sm,
.card-box-shadow .pagebuilder-column.box-shadow-sm {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.box-shadow-md,
.card-box-shadow .pagebuilder-column.box-shadow-md {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.box-shadow-lg,
.card-box-shadow .pagebuilder-column.box-shadow-lg {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

后续新增阴影样式时，只需新增一行@include调用即可，无需重复编写选择器结构，效率很高。

内容的提问来源于stack exchange，提问作者Adan Moses