@if 和 @else

• SCSS
• Sass
• CSS

游乐场

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 permalink

@if 规则之后可以可选地跟一个 @else 规则，写法为 @else { ... }。如果 @if 表达式返回 false，则评估此规则的代码块。

• SCSS
• Sass
• CSS

游乐场

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 permalink

您还可以选择是否评估 @else 规则的代码块，方法是将其写成 @else if <expression> { ... }。如果您这样做，则只有在前面的 @if 的表达式返回 false *并且* @else if 的表达式返回 true 时，才会评估该代码块。

实际上，您可以在 @if 后面链接任意数量的 @else if。链中第一个表达式返回 true 的代码块将被评估，其他代码块将不会被评估。如果链的末尾有一个普通的 @else，则如果其他所有代码块都失败，则会评估其代码块。

• SCSS
• Sass
• CSS

游乐场

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

真值和假值真值和假值 permalink

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

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