Categories
CSS Sass

Sassで使用するベンダープレフィックスだけを出力する – @ifを使う

案件によって不要なベンダープレフィックスの記述を無くしてしまいましょう。時には不要な記述となり、 CSS のファイル容量を増やしてしまう原因にもなります。
 

ベンダープレフィックスを使用するかどうかのパラメータを設定する

/*----------------------------------------------------------
ベンダープレフィックスの使用可否設定
----------------------------------------------------------*/
$USE_WEBKIT: true !default; // CSS3利用時に-webkit-を使用するかどうか
$USE_MOZ:    true !default; // CSS3利用時に-mox-   を使用するかどうか
$USE_MS:     true !default; // CSS3利用時に-ms-    を使用するかどうか
$USE_O:      true !default; // CSS3利用時に-o-     を使用するかどうか

パラメータを設定するだけですね。特に問題はないと思います。

まずは@ifで処理を分ける

取り敢えず作ってしまいましょう。取り敢えずやってみるというのは大事だと思いますし、何より作った後に気づくことは多々あります。

/*----------------------------------------------------------
角丸
----------------------------------------------------------*/
@mixin border-radius($value: 20px) {
    @if ($USE_WEBKIT) { -webkit-border-radius: $value; }
    @if ($USE_MOZ) {       -moz-border-radius: $value; }
    @if ($USE_MS) {         -ms-border-radius: $value; }
    @if ($USE_O) {           -o-border-radius: $value; }
	                            border-radius: $value;
}

冗長ではありますが、これで機能は作ることができました。しかし、毎回 @mixin 内でこの記述を書くのは面倒のような気がしませんか?「Sassで更にコードを短く! – アイコンをループで並べる」のテクニックが使えそうです。

使用するベンダープレフィックスをリストにする

前に紹介したループの説明である「Sassで更にコードを短く! – アイコンをループで並べる」のテクニックだけでは、全てのベンダープレフィックスが出力されてしまうため、そのままでは使えそうにありません。以下のような処理が出来れば実装できそうです。

@if ($USE_O) {
    // -o- をくっつけた変数を作る
}
@if ($USE_MS) {
    // -ms- をくっつけた変数を作る
}
@if ($USE_MOZ) {
    // -moz- をくっつけた変数を作る
}
@if ($USE_WEBKIT) {
    // -webkit- をくっつけた変数を作る
}

では以下のようにしてみましょう。

$VENDER_PREFIX: "" !default;
@if ($USE_O) {
    $VENDER_PREFIX: -o-, $VENDER_PREFIX;
}
@if ($USE_MS) {
    $VENDER_PREFIX: -ms-, $VENDER_PREFIX;
}
@if ($USE_MOZ) {
    $VENDER_PREFIX: -moz-, $VENDER_PREFIX;
}
@if ($USE_WEBKIT) {
    $VENDER_PREFIX: -webkit-, $VENDER_PREFIX;
}

これでできそうな気がしますが、実はできていません。なぜかと言いますと、例えば $USE_O が true だったとして中の処理が実行されますよね。そこで作成されるのはリストです。次に $USE_MS が true で中の処理が実行されます。すると、作成されるのは「 -ms- , リスト」というネスト化されたリストになってしまうのです。このままでは @each 文で一括して取り出すことはできません。そこで以下のようにします。

$VENDER_PREFIX: "" !default;
@if ($USE_O) {
    $VENDER_PREFIX: join(-o-, $VENDER_PREFIX);
}
@if ($USE_MS) {
    $VENDER_PREFIX: join(-ms-, $VENDER_PREFIX);
}
@if ($USE_MOZ) {
    $VENDER_PREFIX: join(-moz-, $VENDER_PREFIX);
}
@if ($USE_WEBKIT) {
    $VENDER_PREFIX: join(-webkit-, $VENDER_PREFIX);
}

Sass に事前に登録されている関数である「 join() 」を使用します。 join() 関数は、2つの引数それぞれ、リストを展開してくっつける役割を持っています。そのため、作成されるのは「 -ms- , リスト」ではなく「 -ms- , -o- , “” 」という一つのリストになります。これでリスト化はできました。以下のように使用すると、「Sassで更にコードを短く! – アイコンをループで並べる」と同様の使い方が出来るようになります。

/*----------------------------------------------------------
角丸
----------------------------------------------------------*/
@mixin border_radius($value: 5px) {
    @each $prefix in $VENDER_PREFIX {
        #{$prefix}border-radius: $value;
    }
}

これで使用するベンダープレフィックスだけを出力できるようになりましたね。しかし!ここで終わらないのが TESTCORDING です。

使用するベンダープレフィックスだけを使ってプロパティを作成する

以下の記述を見て下さい。

@each $prefix in $VENDER_PREFIX {
    #{$prefix}border-radius: $value;
}

これは先程の使用例ですね。ベンダープレフィックスを使用する度にこの記述をするのはまた面倒ではないでしょうか?私は面倒くさがりなので面倒です。できれば一行にしてしまいたいです。では @mixin 化してしまいましょう。

/*----------------------------------------------------------
使用するベンダープレフィックスだけを使ってプロパティを作成する
----------------------------------------------------------*/
@mixin createVenderPrefix($property, $value...) {
    @each $prefix in $VENDER_PREFIX {
        #{$prefix}#{$property}: $value;
    }
}

では実際に使ってみたソースを見てみます。

/*----------------------------------------------------------
角丸
----------------------------------------------------------*/
@mixin border_radius($value...) {
    $property: "border-radius";
    @include createVenderPrefix($property, $value...);
}

二行で書けるようになりましたね。変数は仕方ないので、実質一行です。本当は C言語のように変数の自動生成を目論んでいたのですができませんでした。また、引数にて「 $value… 」となっているのは誤字ではありません。これは可変長引数といって、一つの引数で、複数の値を受け取る書き方になります。詳しくは「Sassでbox-shadowを@mixin化する – 可変長引数を使おう」を参考にしてみてください。
 
ベンダープレフィックスの記述を感じさせないように実装し、かつ短くシンプルにしてみました。

Leave a Reply

Your email address will not be published. Required fields are marked *