Sassメモ：if文で分岐

Sass記法内ではif文を使うことができます。

$value: false;
.box {
  @if $value {
    margin: 0;
  } @else {
    margin: 10px;
  }
}

上記の場合、CSSでは下記のように出力されます。

.box {
  margin: 10px;
}

変数値によって変化を持たせるパターン作りに活用できます。

$width: 300px;
.box {
  width: $width;
  @if $width > 200 {
    font-size: 14px;
  } @else {
    font-size: 10px;
  }
}

上記例の出力CSS。

.box {
  width: 300px;
  font-size: 14px;
}