Question

是否可以删除下面代码中指定的at-rules的复制粘贴？

animated {
    animation: expand .7s;
    -moz-animation: expand .7s;
    -webkit-animation: expand .7s;
    -o-animation: expand .7s;
}
@keyframes expand {
    from {height: 502px;}
    to {height: 558px;}
}
@-moz-keyframes expand {
    from {height: 502px;}
    to {height: 558px;}
}
@-webkit-keyframes expand {
    from {height: 502px;}
    to {height: 558px;}
}

我希望有一个关键帧定义的单一地方（“从......到......”代码）

Answer 1

不，你不能将规则分组。

这是前缀规则的缺点：您必须根据需要为每个前缀重复值。

你可以使用像Sass或LESS这样提供mixin功能的预处理器，编写一个生成所有前缀规则的mixin，并在整个样式表中使用mixin，它将为你编写适当的CSS规则。但是你不能使用CSS对前缀at-rules进行分组而不重复这些值。

将css分组为规则

1 个答案: