Sassで条件分岐(if)を使う

変数の値をもとに出力するCSSの分岐を行えます。

Sass

$setting: true;
@if $setting {
    //settingが有効(true)の場合出力される
    .test {margin: 0}
}

上記の場合、真偽値でifにかけています。
この場合は $setting に true が入っているので .test が出力されます。

$width: 250;
@mixin setWidth {
    @if $width >= 300 {
        width: $width;
    }
    @else {
        width: 0;
    }
}
.box {
    @include setWidth();
}

真偽値だけでなく数値比較などでもifにかけられます。

if文のあるミックスイン setWidth を .box で呼び出していますが、上記例の場合 $setting は250のため、.boxは下記のように出力されます。

CSS

.box {
  width: 0;
}

決まりきったデザインのCSSを作る場合にはif文を利用するケースはありませんが、CSSフレームワークを作る際には便利になってくる記述です。