sass - 使用 SASS & 运算符连接多个类

Question

我有一个返回类列表的函数，由于这个函数在这里没有上下文，我们假设返回的值是：

$classes: '.class1, .class2';

我想生成以下 CSS：

.main-class.class1, .main-class.class2 {
  color: white;
}

我试过这个：

.main-class {
  &#{$classes} {
    color: white;
  }
}

但输出是：

.main-class.class1, .main-class. class2 {
  color: white;
}

我知道做以下工作：

.main-class {
  &.class1, &.class2 {
    color: white;
  }
}

但是类名class1和class2是动态的，必须来自上述变量。

标签： sass

Answer 1

我通过selector-append这种方式得到了它：

$classes: '.class1, .class2';

.main-class {
  @at-root #{selector-append(&, $classes)} {
    color: white;
  }
}

输出 CSS：

.main-class.class1, .main-class.class2 {
  color: white;
}