Sass - 类名通配符答案

【问题标题】：Sass - Class name wildcardSass - 类名通配符
【发布时间】：2016-12-10 08:48:52
【问题描述】：

可以有通配符类名吗？

例如，我有几个 div .div-one,.div-two,.div-three 等有没有办法让我在 sass 中使用以下内容来选择所有具有该名称的 div，或者最好只提供一个涵盖所有类和每个类的唯一类？

.div-*{}

【问题讨论】：

标签： sass

【解决方案1】：

在 CSS 中，您可以将属性选择器与 ^ 一起使用：

div[class^="div-"] ==> 选择所有div 属性值以"div-"

开头的class

示例：

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>

【讨论】：

@nydame 使用 SCSS 语法（Sass 中的主要语法），如果您使用旧的 Sass 语法，请删除大括号和分号
我刚试过这个，它似乎适用于需要以特定子字符串开头和结尾的选择器：[class^="img"], [class^="hero"] { &[class$="responsive"] { max-width: 100%; } }。这正确地针对我的<img class="img_article_responsive">。
你可以做[class^="div-"], [class*=" div-"]。

【解决方案2】：

你可以用这个方法来做。创建一个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 属性以适合您的样式。

【讨论】：

你到底要如何从你的 html 中定位它
我认为你做不到
@colinrickels：参考 mixin 并阅读 SASS interpolation。 .div-#{$name} 表示创建一个将名称参数附加到div- 的字符串。在您的 HTML 中：<div class="div-one">Whatever</div>。对于 OP，我很好奇是否有一种方法可以引用一个以部分字符串开头并以另一个字符串结尾的类，而忽略介于两者之间的任何内容。我认为答案是否定的。

【解决方案3】：

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

对于 CSS 规则：

[class^="div-"]

标记

class="div-something other-class"

匹配，而：

class="other-class div-something"

不匹配

¯\_(ツ)_/¯

【讨论】：

你是对的，只有当名为 div-something 的类是第一个时才有效，但这不是答案，你的建议是什么？另一种解决方案是使用 [class*="div-"]
这是一个有趣的观察。为什么，哦，为什么 CSS 解析器会这样？这是一个错误吗？还是“按设计工作”？引用，有人吗？
@BenJohnson：这是设计好的。 [name^="value"] 仅表示“属性name 的值以value 开头。有意义的是，它适用于任何类型的属性值，而不仅仅是class="…"。仅适用于class 属性，CSS“知道”多个值用空格分隔。

【解决方案4】：

小点，但我注意到在 Sass 中嵌套此规则时，您需要将 & 号放在左方括号的右边。

这不起作用：

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

但这确实：

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

注意与号的位置。

【讨论】：