Sass の if 関数

これは CSS Preprocessor Advent Calendar 2012 5日目の記事です。

今日はあまり知られていない(と思われる) Sass の if 関数について紹介したいと思います。

Sass には、条件分岐のための制御構文として @if ディレクティブ(いわゆる if 文)が用意されています。

$type: ocean;

p {
  @if $type == ocean {
    color: blue;
  } @else {
    color: black;
  }
}

Sassの紹介記事の中では必ずと言っていいほど出てきますし、皆さんも一度は使ったことがあるのではないでしょうか。

実はこの @if ディレクティブ以外に、Sassには if 関数が標準で用意されています。

if(condition, if_true, if_false)
condition
条件式
if_true
真の時の戻り値
if_false
偽の時の戻り値

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#if-instance_method

この if 関数を使って上述したコードを書きなおすと、次のようになります。

$type: ocean;

p {
  color: if($type == ocean, blue, black);
}

あら素敵、1行で非常に簡潔に書くことができました。:)

@if ディレクティブとの一番の違いは、関数なので戻り値しか指定できない点です。例えば、次のようにプロパティごと返そうとしてもエラーになります。

$type: ocean;

p {
  if($type == ocean, color: blue, color: black);
}

また、複数の条件分岐があるケースは、記述できないことはないですが、コードの可読性が落ちるので、素直に @else if を使ったほうがよいと思います。

$type: monster;

p {
  color: if($type == ocean, blue, if($type == matador, red, black));
}

このように、使い道は @if ディレクティブよりも限定されますが、うまく使うと、スマートにコードを書くことができます。例えば、以下は Compass の中で実際に使われている事例です。

@mixin transform-origin(
  $origin-x: $default-origin-x,
  $origin-y: $default-origin-y,
  $origin-z: false,
  $only3d:   if($origin-z, true, false)
) {
  $origin: unquote('');
  @if $origin-x or $origin-y or $origin-z {
    @if $origin-x { $origin: $origin-x; } @else { $origin: 50%; }
    @if $origin-y { $origin: $origin $origin-y; } @else { @if $origin-z { $origin: $origin 50%; }}
    @if $origin-z { $origin: $origin $origin-z; }
    @include apply-origin($origin, $only3d);
  }
}

第4引数 $only3d の初期値は、第3引数 $origin-z の値によって truefalse がセットされるようになっていますが、if 関数を使うことで非常にわかりやすいコードになっているのが見てわかるかと思います。

というわけで、if 関数の紹介でした。

次は、@astronaughts さんによる Stylus の導入方法のお話 です!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>