true 和 false

@use "sass:math";

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

@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操作者返回一个布尔值的相反。

@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

@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：

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

  @if $circle {
    border-radius: $size / 2;
  }
}

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

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

  @if $circle
    border-radius: $size / 2

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

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

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

该if()函数选择返回一个值，如果它的参数是true 与另一个如果它的参数是  false：

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

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

真实与虚假永久存在

任何地方true或者false是允许的，可以使用其它值。值false和null是falsey，这意味着Sass认为它们以指示虚假和原因的条件失败。其他所有值都被认为是真实的，因此Sass认为它们像工作一样，true并导致成功的条件。

例如，如果要检查字符串是否包含空格，则只需编写即可string.index($string, " ")。如果找不到字符串，则 返回该string.index()函数null，否则返回数字。