変数の値をもとに出力する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フレームワークを作る際には便利になってくる記述です。