如何将SCSS循环生成的动态.box-{num}类追加到已有选择器组中

实现方法 #

你可以通过SCSS的字符串拼接+插值语法实现选择器动态合并，完整实现代码如下：

$box-length: 12 !default;
// 定义基础选择器组
$merged-selectors: ".row, .column, .box";

// 循环生成.box类 + 拼接选择器
@for $i from 1 through $box-length {
  // 追加当前生成的.box类到选择器组
  $merged-selectors: $merged-selectors + ", .box-#{$i}";
  // 保留原有.box的flex样式逻辑
  .box-#{$i} {
    flex: 0 0 (100% / $box-length * $i);
  }
}

// 媒体查询中直接使用拼接完成的选择器
@media screen and (max-width: 768px) {
  #{$merged-selectors} {
    /* 此处写入公共样式 */
  }
}

实现逻辑 #

1. 先声明字符串类型的变量存储初始的.row、.column、.box三个选择器
2. 循环生成.box-*类的同时，把每个新生成的类名追加到选择器变量中
3. 最后在媒体查询内通过#{}插值语法，把拼接好的字符串解析为正常的CSS选择器即可

如果只需要合并前N个.box类（比如示例中的前5个），可以单独声明变量控制拼接的循环上限：

$media-box-limit: 5 !default;
// 拼接时单独用这个变量循环即可
@for $i from 1 through $media-box-limit {
  $merged-selectors: $merged-selectors + ", .box-#{$i}";
}

内容的提问来源于stack exchange，提问作者Natan Felles