Sass - 类名通配符

Question

是否可以使用通配符类名？

例如我有几个 div .div-one , .div-two , .div-three等等
有没有办法让我在 sass 中使用下面的内容来选择所有具有该名称的 div，还是最好只给出一个涵盖所有和每个独特类的类？
.div-*{}

Answer 1

在 CSS 中，您可以使用带有 ^ 的属性选择器:
div[class^="div-"] ==> 全选 div与 class以“div-”开头的属性值

示例:

div {
  height: 20px;
  margin-bottom: 5px;
  border: 1px solid black;
}

div[class^="div-"] {
  border-color: red;
}

<div class="div-one"></div>
<div class="div-two"></div>
<div class="other"></div>
<div class="div-three"></div>

更新

正如@FreePender 所说，如果 CSS 类不是属性值中的那个，它就不起作用。另一种解决方案是使用带有 * 的属性选择器:
div[class*="div-"] ==> 全选 div与 class包含“div-”的属性值。

这样它也会匹配一个名为 nodiv-one 的 CSS 类。例如，但这不是正常发生的事情。

div {
  height: 20px;
  margin-bottom: 5px;
  border: 1px solid black;
}

div[class*="div-"] {
  border-color: red;
}

<div class="div-one"></div>
<div class="div-two"></div>
<div class="other"></div>
<div class="myclass div-three"></div>