Mixinでanimationの関数化

#Animationの関数化Mixinについて

mixinを使ってanimationプロパティをまとめると、
使用するときに名前だけ設定すればmixin内のanimationプロパティが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;
);

####かなり雑な説明になりましたがこれで終わります。