布尔值（Booleans）

布尔值是逻辑值true和false。除了它们的文字形式之外，布尔值还由相等和关系运算符以及许多内置函数（如：math.comparable()和map.has-key()）返回。

@use "sass:math";

@debug 1px == 2px; // false
@debug 1px == 1px; // true
@debug 10px 
您可以使用布尔运算符来处理布尔值。如果两边都是true，则and运算符返回true。如果一侧为true，则or运算符返回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

使用布尔值
您可以使用布尔值，来选择是否，在 Sass 中执行各种操作。如果其参数是true，则该@if规则评估样式块：

@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

真与假

在任何允许true或false的地方，您也可以使用其他值。false和null的值是falsey，这意味着 Sass 认为它​​们表示错误并导致条件失败。其他所有值都被认为是真实的，因此 Sass 认为它​​们的工作方式类似true并导致条件成功。

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

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com