@if 和 @else

• SCSS
• Sass
• CSS

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

@else@else permalink

@if 规则可以选择跟随 @else 规则，写作 @else { ... }。如果 @if 表达式返回 false，则评估此规则的块。

¥An @if rule can optionally be followed by an @else rule, written @else { ... }. This rule’s block is evaluated if the @if expression returns false.

• SCSS
• Sass
• CSS

Playground

SCSS Syntax

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

Playground

Sass Syntax

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

.banner {
  background-color: #f2ece4;
  color: #036;
}
body.dark .banner {
  background-color: #6b717f;
  color: #d2e1dd;
}

条件表达式可以包含 布尔运算符 (and, or, not)。

¥Conditional expressions may contain boolean operators (and, or, not).

@else if@else if permalink

你还可以选择是否通过写入 @else if <expression> { ... } 来评估 @else 规则的块。如果这样做，则仅当前面的 @if 的表达式返回 false 并且 @else if 的表达式返回 true 时才会计算该块。

¥You can also choose whether to evaluate an @else rule’s block by writing it @else if <expression> { ... }. If you do, the block is evaluated only if the preceding @if’s expression returns false and the @else if’s expression returns true.

事实上，你可以在 @if 后链接任意数量的 @else if。将评估链中表达式返回 true 的第一个块，而不评估其他块。如果链的末尾有一个普通的 @else，则当其他所有块都失败时，将评估该块。

¥In fact, you can chain as many @else ifs as you want after an @if. The first block in the chain whose expression returns true will be evaluated, and no others. If there’s a plain @else at the end of the chain, its block will be evaluated if every other block fails.

• SCSS
• Sass
• CSS

Playground

SCSS Syntax

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

Playground

Sass Syntax

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

.next {
  height: 0;
  width: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 2.5px;
  border-left-color: black;
}

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.