陽炎空華

@mixinを使って、ベンダープレフィックスを自動で出力しようと以下のコードを書いていたのですが、カンマ区切りで値を複数指定できるbox-shadowとかで躓いたのでメモ。

// ベンダープレフィックスを自動で付与する
$set-prefix: '' , -moz- , -webkit-;

// プロパティにプレフィックスを付与
@mixin SetPrefix($name, $value) {
    @each $prefix in $set-prefix {
        #{$prefix}#{$name}: $value;
    }
}

上のような@mixinに下のような値の渡し方をすると、失敗する。

.box_shadow {
	@include SetPrefix(box-shadow,1px 1px 5px #000, -1px -1px 5px #888);
}

引数として渡された値にカンマがあるために「１つのリスト」ではなく「いくつかの引数」として扱われてしまうからだ。
これを解決する方法を探していたところ、以下の記事に行き着きました。

WebTecNote - [Sass] Sass 3.2で実装された新機能がヤバい

解決方法は簡単で、引数の後ろに「...」 （ドット３つ）を付けるだけでした！（※Sassのバージョンが3.2以上が必要）

// プロパティにプレフィックスを付与
@mixin SetPrefix($name, $value...) {
    @each $prefix in $set-prefix {
        #{$prefix}#{$name}: $value;
    }
}

他にも、プレースホルダーセレクタとか、痒い所に手が届くような機能が追加されている模様。
今さらですが、Sassの進化に万歳！