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;
}

如果我可以通过这样的方式节省空间，那将是非常棒的：

.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将基本选择器和属性作为参数并将三个逗号分隔的长选择器放在一起是一个完全有效的选项。

像

这样的东西

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

@include width(button, 400px);

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

可以很容易地修改它以获取一组键值以影响多个属性

如何压缩多组css查询

1 个答案: