2

私は要素を持っていて.shake、それ:hoverがアニメーションを開始するときです。シェイク要素のプロパティとそのアニメーション:hover効果を継承する必要があります。

私が持っている

.inherit-shake {
   .shake;
}

主要なプロパティ.inherit-shakeを継承するだけでアニメーションを継承するため、機能しません。.shake:hover

Lessを使用してそれを行う方法はありますか？

4

1 に答える 1

3

.shakeとのルール.shake:hoverが以下のスニペットのように記述されている場合、現在のコードはそのまま機能するはずです。

.inherit-shake {.shake;}
.shake{
    a:a;
    &:hover{b:b;}
}

ただし、以下のように書かれていると思いますが、それがルールがセレクター:hoverに適用されない理由です。.inherit-shape

.inherit-shake {.shake;}
.shake{a:a;}
.shake:hover{b:b;}

最善の解決策は、最初のスニペットで言及されているモデルを使用することです。ただし、何らかの理由でソース mixin を変更できない場合は、以下のスニペットのようにキーワードを使用してextend関数を使用するのが最善です。all

.inherit-shake {&:extend(.shake all);}
.shake{a:a;}
.shake:hover{b:b;}

関数内のallキーワードは、 が に適用されるものと同じプロパティextendを取得することを確認します。コンパイルされた CSS 出力は次のようになります。.inherit-shake:hover.shake:hover

.shake, .inherit-shake {a: a;}
.shake:hover, .inherit-shake:hover {b: b;}

関数を使用する追加の利点は、extendセレクターが自動的にグループ化されることです (上記の出力のように)。

于 2015-07-21T08:08:53.170 に答える