Sass記法でベンダプレフィックスをフォールバックしてくるmixinを書く

一般的にはScss記法が多い気がしますが（「{}」で囲むスタイル）、 {}とか;を書くのが億劫なので、普段はSass記法を使っています。

今回、ベンダープレフィックス用にmixinをつくろうと思いました。ループを使って綺麗に書きたかったんですが、Sass記法でどうやるのかあまり情報がない。公式サイトを見てもmixinについてはScss記法しか載っていない。

そこでいろいろ試してみました。

普通に`@each`が使えた

使えました、@eachが普通に。 Sass記法の場合は、mixinも@mixinじゃなくて=を書くだけで、@（アットマーク）はほとんど使う場面がないのですが、普通に使えるんですね。

=transform($value)
    @each $prefix in '', -webkit-, -ms-
        #{$prefix}transform: scale($value, $value)

次に気になったのは、上記のscaleのところを変数にできるのか、というところ。関数名（便宜上「関数」って呼んでます）の部分に変数を渡すのはNGなような気がします。

が、普通にできました。

=transform($property, $value)
    @each $prefix in '', -webkit-, -ms-
        #{$prefix}transform: #{$property}($value, $value)

これで、transformみたいな、関数名にscaleとかtranslateとかいろいろ入る奴がきてもDRYが保てそうです。

あとひとつ気になったのが、scaleの引数で可変引数はとれないか、というところ。

=transform($property, $value...)
    @each $prefix in '', -webkit-, -ms-
        #{$prefix}transform: #{$property}($value)

普通に取れました。これで完成です！

Scss記法より書く量が省けて、Stylusのように:（コロン）まで取ってしまうスタイルよりも可読性が高くて、個人的にはSass記法、大好きです。