真偽値

真偽値は、論理値 `true` と `false` です。リテラル形式に加えて、真偽値は等価演算子および関係演算子、そしてmath.comparable()やmap.has-key()のような多くの組み込み関数によって返されます。

プレイグラウンド

SCSS構文

@use "sass:math";

@debug 1px == 2px; // false
@debug 1px == 1px; // true
@debug 10px < 3px; // false
@debug math.comparable(100px, 3in); // true
プレイグラウンド

Sass構文

@use "sass:math"

@debug 1px == 2px  // false
@debug 1px == 1px  // true
@debug 10px < 3px  // false
@debug math.comparable(100px, 3in)  // true

真偽値演算子を使用して真偽値を操作できます。 `and` 演算子は両側が `true` の場合に `true` を返し、 `or` 演算子はどちらか側が `true` の場合に `true` を返します。 `not` 演算子は、単一の真偽値の反対を返します。

プレイグラウンド

SCSS構文

@debug true and true; // true
@debug true and false; // false

@debug true or false; // true
@debug false or false; // false

@debug not true; // false
@debug not false; // true
プレイグラウンド

Sass構文

@debug true and true  // true
@debug true and false  // false

@debug true or false  // true
@debug false or false  // false

@debug not true  // false
@debug not false  // true

真偽値の使用真偽値の使用 パーマリンク

Sassでさまざまな処理を行うかどうかを選択するために、真偽値を使用できます。 `@if` 規則は、引数が `true` の場合にスタイルのブロックを評価します。

プレイグラウンド

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;
}

`if()` 関数は、引数が `true` の場合は1つの値を返し、引数が `false` の場合は別の値を返します。

プレイグラウンド

SCSS構文

@debug if(true, 10px, 30px); // 10px
@debug if(false, 10px, 30px); // 30px
プレイグラウンド

Sass構文

@debug if(true, 10px, 30px)  // 10px
@debug if(false, 10px, 30px)  // 30px

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

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

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

⚠️ 注意！

一部の言語では、 `false` と `null` だけでなく、より多くの値を偽と見なします。Sassはそのような言語ではありません！空の文字列、空のリスト、数値 `0` はすべてSassでは真です。