@if と @else

@if ルールは @if <式> { ... } と記述され、そのブロックが評価されるかどうか（CSS としてスタイルを発行するかどうかを含む）を制御します。式は通常、true または falseのいずれかを返します。式が true を返す場合はブロックが評価され、式が false を返す場合は評価されません。

プレイグラウンド

SCSS構文

@use "sass:math";

@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: math.div($size, 2);
  }
}

.square-av {
  @include avatar(100px, $circle: false);
}
.circle-av {
  @include avatar(100px, $circle: true);
}
プレイグラウンド

Sass構文

@use "sass:math"

@mixin avatar($size, $circle: false)
  width: $size
  height: $size

  @if $circle
    border-radius: math.div($size, 2)



.square-av
  @include avatar(100px, $circle: false)

.circle-av
  @include avatar(100px, $circle: true)

CSS出力

.square-av {
  width: 100px;
  height: 100px;
}

.circle-av {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

@else@else パーマリンク

@if ルールには、オプションで @else ルール（@else { ... } と記述）を続けることができます。このルールのブロックは、@if 式が false を返す場合に評価されます。

プレイグラウンド

SCSS構文

$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    background-color: $light-background;
    color: $light-text;
  } @else {
    background-color: $dark-background;
    color: $dark-text;
  }
}

.banner {
  @include theme-colors($light-theme: true);
  body.dark & {
    @include theme-colors($light-theme: false);
  }
}
プレイグラウンド

Sass構文

$light-background: #f2ece4
$light-text: #036
$dark-background: #6b717f
$dark-text: #d2e1dd

@mixin theme-colors($light-theme: true)
  @if $light-theme
    background-color: $light-background
    color: $light-text
  @else
    background-color: $dark-background
    color: $dark-text



.banner
  @include theme-colors($light-theme: true)
  body.dark &
    @include theme-colors($light-theme: false)

CSS出力

.banner {
  background-color: #f2ece4;
  color: #036;
}
body.dark .banner {
  background-color: #6b717f;
  color: #d2e1dd;
}

条件式には、ブール演算子 (and, or, not) を含めることができます。

@else if@else if パーマリンク

@else ルールのブロックを評価するかどうかを、@else if <式> { ... } と記述することで選択することもできます。そうすると、ブロックは、先行する @if の式が false を返し、かつ、@else if の式が true を返す場合にのみ評価されます。

実際には、@if の後に必要なだけ多くの @else if をチェーンすることができます。チェーン内の最初の式が true を返すブロックが評価され、その他は評価されません。チェーンの最後にプレーンな @else がある場合は、他のすべてのブロックが失敗した場合にそのブロックが評価されます。

プレイグラウンド

SCSS構文

@use "sass:math";

@mixin triangle($size, $color, $direction) {
  height: 0;
  width: 0;

  border-color: transparent;
  border-style: solid;
  border-width: math.div($size, 2);

  @if $direction == up {
    border-bottom-color: $color;
  } @else if $direction == right {
    border-left-color: $color;
  } @else if $direction == down {
    border-top-color: $color;
  } @else if $direction == left {
    border-right-color: $color;
  } @else {
    @error "Unknown direction #{$direction}.";
  }
}

.next {
  @include triangle(5px, black, right);
}
プレイグラウンド

Sass構文

@use "sass:math"

@mixin triangle($size, $color, $direction)
  height: 0
  width: 0

  border-color: transparent
  border-style: solid
  border-width: math.div($size, 2)

  @if $direction == up
    border-bottom-color: $color
  @else if $direction == right
    border-left-color: $color
  @else if $direction == down
    border-top-color: $color
  @else if $direction == left
    border-right-color: $color
  @else
    @error "Unknown direction #{$direction}."



.next
  @include triangle(5px, black, right)

CSS出力

.next {
  height: 0;
  width: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 2.5px;
  border-left-color: black;
}

真偽値と偽値真偽値と偽値 パーマリンク

true または false が許可されている場所では、他の値も使用できます。値 false と null は偽値です。つまり、Sassはそれらを偽を示すものとみなし、条件を失敗させます。他のすべての値は真値とみなされるため、Sassはそれらを true のように機能させ、条件を成功させるとみなします。

たとえば、文字列にスペースが含まれているかどうかを確認する場合は、string.index($string, " ") と記述するだけで済みます。string.index() 関数は、文字列が見つからない場合は null を返し、それ以外の場合は数値を返します。

⚠️ 注意！

一部の言語では、false と null だけでなく、より多くの値が偽値とみなされます。Sass はそのような言語の1つではありません！空の文字列、空のリスト、および数値 0 はすべて Sass では真値です。