由于在我正在从事的元素中使用 BEM 的性质，我发现我自己和其他人在我们的 CSS 文件中使用以下内容:
[class*="something"] { ... }
[class*="__something-else"] { ... }
[class*="--other-stuff"] { ... }
[class*="more-things"] { ... }
[class*="__even-more"] { ... }
是否有一个可取的解决方法来缩短上面的代码以防止单词 class 的乏味重复，或者我们应该坚持使用这种方法吗？
最佳答案
您需要使用像 LESS 或 SCSS/Sass 这样的预处理器。
我使用 SCSS 来展示您的想法。
通过使用@mixin 和@content，您可以创建类选择器的生成器函数:
@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
关于regex - 以正则表达式为目标的类名的简写，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37641395/