【Sass】@mixinメモ

transition呼び出し楽にしたい

1. $変数設定
2. @mixinで設定
3. @includeで呼び出し

Sass

//transition設定
//単に呼び出すだけ
$transition:all .3s ease;
img{transition:$transition;}

//mixin使用で中身をいじれるように
@mixin transition($property:all .3s ease){ //初期値
    transition:$property;
}
img{
    @include transition();
}
img{
    @include transition(background 2s ease); //こっちだと一つだけの値を変えれない
}
//個別指定対応
@mixin transition($property:all,$time:.3s,$function:ease){
    transition:$property $time $function;
}
img{
    @include transition(background,$function:ease-in); //こっちだと個別指定できる
}

コンパイル後

上記SassをCSSに吐き出した結果。

CSS

img {
  transition: all 0.3s ease;
}

img {
  transition: all 0.3s ease;
}

img {
  transition: background 2s ease;
}

img {
  transition: background 0.3s ease-in;
}