Sass-类名通配符

是否可以使用通配符类名

例如，我有几个div

.div one

，

.div two

，

.div two

等等 我是否有办法在sass中使用下面的选项来选择所有具有该名称的div，或者最好只给出一个类来覆盖每个div上的所有类和唯一类

---

.div-*{}

在CSS中，您可以将属性选择器与

^

一起使用：

div[class^=“div-”]

==>选择属性值以“div-”开头的所有

div

示例：

div{
高度：20px；
边缘底部：5px；
边框：1px纯黑；
}
div[class^=“div-”]{
边框颜色：红色；
}

---

您可以使用此方法执行此操作。创建一个mixin：

@mixin myDIV($name, $color, $color-hover) {
    .div-#{$name} {
        a {
            color: #{$color};
            &:focus, &:hover {
                color: #{$color-hover};
            }
        }
    }
}

用法：

@include myDIV('one', $blue, $blue-hover);
@include myDIV('two', $green, $green-hover);
@include myDIV('three', $red, $red-hover);

---

您可以更改变量（$blue）和css属性以适合您的风格。

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

对于CSS规则：

[class^="div-"]

加价

class="div-something other-class"

匹配，鉴于：

class="other-class div-something"

不匹配

---

“”\_(ツ)_/“

小点，但我注意到，当在Sass中嵌套此规则时，您需要将“与”符号正好放在开口方括号上

这不起作用：

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

但这确实：

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

---

注意符号和的位置。

@nydame使用SCSS语法（Sass中的主要语法），如果您使用旧的Sass语法，请删除大括号和分号。我刚刚尝试过这一点，它似乎适用于需要以特定子字符串开头和结尾的选择器：

[class^=“img”]，[class^=“hero”]{&[class$=“responsive”]{max width:100%；}}

。这正确地针对了我的

。您可以执行

[class^=“div-”]，[class*=“div-”]

。您是对的，只有当名为div something的类是第一个时才有效，但这不是答案，这是您的建议？另一个解决方案是使用[class*=“div-”]这是一个有趣的观察结果。为什么，哦，为什么CSS解析器会这样？这是一个bug？还是“按设计工作”？引用，有人吗？@BenJohnson:这是按设计的。

[name^=“value”]

只是指“属性

名称

的值以

值

开头。b/c它适用于任何类型的属性值，而不仅仅是

类=“…”

。只有

类

属性，CSS“知道”多个值之间用空格分隔。你到底是怎么从你的htmli中找到这个目标的？我不认为你能做@colinrickels:引用mixin并继续阅读。

.div-#{$name}

意味着创建一个字符串，在

div-

后面加上名称param。在你的HTML中：

Whatever

。对于OP，我很好奇是否有一种方法可以引用一个以部分字符串开头，以另一个字符串结尾的类，忽略介于两者之间的任何内容。我想答案是否定的。