scss cssのベンダープレフィックスを追加するmixin

scss、css共にコーディングする時に、ベンダープレフィックスをつけるのが正直めんどくさい。

もっと手軽に解決する方法はないのか探していたら、mixinで処理する方法を発見した。

css-tricks.com

上で紹介されているmixinでもいいのだが、もっとコンパクトに書けるかもしれないと思い、少し修正を加えた。

@mixin vendor-prefix($property, $value) {
    $vendor-prefixes: (
        "moz",
        "webkit",
        "ms"
    );
    @each $vendor-prefix in $vendor-prefixes {
        #{'-' + $vendor-prefix + '-' + $property}: $value;
    }
    #{$property}: $value;
}

上で紹介したコードの方が2つの点で利点があると思っている。

まず1個目は、vendor prefixがmixinのローカル変数として定義されるのでグローバル環境を汚染しないということ。

2個目は、呼び出す時に、変数を一つ減らすことによって、cssプロパティーとその値だけを引数に設定すればいいので運用しやすいということ。

今後はこちらを使っていく。