类的Sass选择器助手

Question

我经常使用这种css选择器匹配以前缀开头的所有类：

.foo [class^="bar-"],
.foo [class*=" bar-"] {
    // Somme css
}

我想知道是否有一个Sass函数/ mixin / helper可以帮助我在一行中执行它而不写2条规则（^用于起始和*用于包含）？也许有类似函数的东西：

.foo classStartBy('bar-') {
    // Somme css
}

Answer 1

由于这可能不是最好的答案，您始终可以创建一个@mixin来接受将创建所需选择器所需的类：

@mixin bar($classes) {
  #{$classes} {
    //your wanted CSS
    display: flex;
  }
}

.foo {
  @include bar('[class^="bar-"], [class*="bar-"]');
}

哪个输出：

.foo [class^="bar-"], .foo [class*="bar-"] {
  display: flex;
}

您还可以向mixin添加第二个参数，该参数可以接受CSS样式。