Animationの関数化Mixinについて
mixinを使ってanimationプロパティをまとめると、
使用するときに名前だけ設定すればmixin内のanimatinoプロパティがdefault値として適用されます。
mixinの設定
↓ のようにmixinにanimationプロパティをぶち込みます。
ちなみにanimation:{}はanimation-OOOを省略してます。
面倒な設定ですが、一つひとつ設定するよりかはマシになります。
@mixin.animationNoNamae(
$name,
$duration: 1s,
$timing-function: ease,
$iteratin-count: infinite,
$direction: normal
){
animation: {
name: $name;
duration: $duration;
timing-function: $timing-function;
iteration-count: $iteration-count;
direction: $direction;
}
これでmixinの設定が完了しました。
mixinの引数に入れた値がanimation使用時のdefault値として設定されています。
この設定を引き出す値はここでは animationNoNamae です。
mixinの使い方
animationを適用したい要素内で ↓ のように
@include animationNoNamae を記載する。
nanikanoYouso {
@include animationNoNamae(
$name: OOO
);
}
$name: OOOはテキトーに設定します。
テキトーに名付けた値で、animationのための@keyframesを設定します。
@keyframes OOO{
0% {
~~
}
100% {
~~
}
これでnanikanoYousoにanimationが適用されます。
↓ mixinで設定した値はdefault値になるので、上書きできます。
@include animationNoNamae (
$name: ~~~;
$duration: 20s;
);