Sass - 类名称通配符

Question

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

例如,我有几个div的.div-one,.div-two,.div-three等有没有办法对我来说,使用下面的SASS选择所有与该名称的div或者是它最好只是为了给一个类,涵盖了所有的每一个独特的类？

.div-*{}

Answer 1

在CSS中,您可以使用属性选择器^:

div[class^="div-"]==>选择div具有class以"div-"开头的属性值的all

例:

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所说,如果*不是第一个不起作用,另一个解决方案是使用属性选择器div[class*="div-"]:

div==>选择所有class与nodiv-one属性值包含"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="myclass div-three"></div>

Answer 2

接受的答案在理论上很酷，但在今天最新的 chrome 中：

对于 CSS 规则：

[class^="div-"]

标记

class="div-something other-class"

匹配，而：

class="other-class div-something"

不匹配

¯\_(?)_/¯

Answer 3

小点，但我注意到，在将此规则嵌套在Sass中时，需要将“＆”号放在右方括号中。

这不起作用：

.zoomed {
  & [class*=" aspect-"] {
    margin-bottom: $spacer * 4.0;
  }
}

但这确实是：

.zoomed {
  &[class*=" aspect-"] {
    margin-bottom: $spacer * 4.0;
  }
}

注意与符号的位置。