將css分組為規則

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進行分組而不重復這些值。