Shorthand for class 使用正则表达式定位的名称

Question

由于在我正在进行的项目中使用 BEM 的性质，我发现我自己和其他人在我们的 CSS 文件中使用以下内容：

[class*="something"] { ... }
[class*="__something-else"] { ... }
[class*="--other-stuff"] { ... }
[class*="more-things"] { ... }
[class*="__even-more"] { ... }

是否有建议的解决方法来缩短上述内容以防止单词 class 的乏味重复，或者我们应该坚持使用这种方法？

Answer 1

您需要使用预处理器，例如 LESS 或 SCSS/Sass。

我用SCSS来证明你的想法。

通过使用 @mixin 和 @content，您可以创建一个 class 选择器的生成器函数：

@mixin contain($name) {
  [class*=#{$name}] {
    @content;
  }
}

创建一个新的包含选择器：

@include contain(--big) {
  font-weight: bold;
  font-size: 50px;
}

https://jsfiddle.net/twxia/pLy3bz44/2/

这似乎不比只输入 [class*=...] 短，但是如果您使用 Sass，您可以像这样生成 @mixin：

+contain(--big)
  font-weight: bold
  font-size: 50px

我认为使用编辑器的自动完成插件或 Sass 将解决您的问题 :D

Shorthand for class 使用正则表达式定位的名称

Shorthand for class names targeted with regex

css

regex

bem