如何压缩多组 css 查询

Question

有没有更好的写CSS子组的方法？现在我有这个 CSS:

.foo > really-long-set-of-similar-info > .bar:hover,
.foo > really-long-set-of-similar-info > .bar:focus,
.foo > really-long-set-of-similar-info > .bar.class{
    width: 2px;
}

如果我可以通过这样做来节省 space 那就太棒了：

.foo > really-long-set-of-similar-info > .bar(:hover,:focus,.class){
    width: 2px;
}

可以吗？如果是，怎么做？

Answer 1

如果 .class 是一个应该影响交互元素（按钮、输入）的多个实例的修饰符，那么有点，有点..

使用CSS 自定义属性，您可以为真长相似信息集设置初始值，只需重新定义修饰符的变量即可。

really-long-set-of-similar-info{width: var(--width)}
(...)
.class{--width:2px}

https://codepen.io/facundocorradini/pen/RxVgrv 我以前制作过那支笔来展示 CSS 变量的强大功能。

问题是浏览器与 IE 的兼容性（一如既往），因此如果对于您要使用的特定效果来说这是一个有效的选择，则需要回退到优雅降级。

除此之外，将基本选择器和属性作为参数并弹出三个逗号分隔的长选择器的简单预处理器混合是一个完全有效的选项。

类似

@mixin width($selector, $width) {
  #{$selector}.class,
  #{$selector}:focus,
  #{$selector}:hover {
    width: $width;
  }
}

@include width(button, 400px);

https://jsfiddle.net/sfgs60or/1/

这可以很容易地修改为采用一组键值以影响多个属性

如何压缩多组 css 查询

How to condense a multiple group css query

css

selector