布尔值

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

Playground

SCSS Syntax

@use "sass:math";

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

Sass Syntax

@use "sass:math"

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

你可以使用 布尔运算符 处理布尔值。如果两边都是 true，则 and 运算符返回 true；如果两边都是 true，则 or 运算符返回 true。not 运算符返回单个布尔值的相反值。

¥You can work with booleans using boolean operators. The and operator returns true if both sides are true, and the or operator returns true if either side is true. The not operator returns the opposite of a single boolean value.

Playground

SCSS Syntax

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

Sass Syntax

@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

使用布尔值使用布尔值 permalink

¥Using Booleans

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

¥You can use booleans to choose whether or not to do various things in Sass. The @if rule evaluates a block of styles if its argument is true:

Playground

SCSS Syntax

@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);
}
Playground

Sass Syntax

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

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

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

如果 if() 函数 的参数是 true，则返回一个值；如果其参数是 false，则 if() 函数 返回另一个值：

¥The if() function returns one value if its argument is true and another if its argument is false:

Playground

SCSS Syntax

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

Sass Syntax

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

Truthiness and FalsinessTruthiness and Falsiness permalink

Anywhere true or false are allowed, you can use other values as well. The values false and null are falsey, which means Sass considers them to indicate falsehood and cause conditions to fail. Every other value is considered truthy, so Sass considers them to work like true and cause conditions to succeed.

For example, if you want to check if a string contains a space, you can just write string.index($string, " "). The string.index() function returns null if the string isn’t found and a number otherwise.

⚠️ Heads up!

Some languages consider more values falsey than just false and null. Sass isn’t one of those languages! Empty strings, empty lists, and the number 0 are all truthy in Sass.