2

coma で区切るだけでは、以下の同じコードを簡単に実現できないことに気付きました@keyframes mymove, @-moz-keyframes mymove, etc..。それらが機能するためには、以下のようにそれぞれ個別に宣言する必要があります。

それらをグループ化してこのコードを短くする方法はありますか?

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
4

1 に答える 1

3

いいえ、そうは思いませんが、SASS/SCSS/LESS/... のような CSS 言語 (別名 CSS プリプロセッサ) を使用できます。出力 (CSS) は同じですが、何かを変更する方がはるかに簡単です。 !

チェックアウト

興味があれば、それらをインストールしてセットアップする努力は、それだけの価値があります。

編集:SCSSを使用して、次のことを行いました:

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} { @content; }
    @-moz-keyframes #{$name} { @content; }
    @keyframes #{$name} { @content; }
}

使用例:

@include keyframes(pulse) {
    0%,100% {
        opacity: 0;
    } 
    50% {
        opacity: 1;
    }
}

ルールをネストできるようにするには、SASS の最新のプレリリースが必要であることを追加する必要がありますが (別の「{」ルール内に「{」があります...)、run「gem install sass を更新する必要があります -- 「sass-3.2.0.alpha.104」を取得するはずの「pre」

于 2012-04-29T14:20:35.787 に答える