@if 和 @else

该@if规则被写入@if <expression> { ... }，并且它控制其块是否被评估（包括发光的任何样式为CSS）。该表达式通常返回任一true或false -if表达式返回true，该块被评估，并且如果表达式返回false它不是。

SCSS  语法

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

Sass语法

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

CSS  输出

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

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

@else永久链接@else

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

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

@else如果永久链接@else if

您还可以@else通过编写选择是否评估规则块@else if <expression> { ... }。如果这样做，则仅在前@if一个表达式返回false 并且该表达式返回时，才对块进行求@else if值  true。

实际上，您可以在@else if后面随意链接任意多个@if。表达式返回的链中的第一个块，true将不被计算。如果@else在链的末尾有一个平原，则如果其他所有块均失败，则将评估其块。

SCSS  语法

@mixin triangle($size, $color, $direction) {
  height: 0;
  width: 0;

  border-color: transparent;
  border-style: solid;
  border-width: $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语法

@mixin triangle($size, $color, $direction)
  height: 0
  width: 0

  border-color: transparent
  border-style: solid
  border-width: $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;
}

真实与虚假永久存在

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

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

Head️抬头！

某些语言认为比正义false和正义更虚假的价值观null。Sass不是这些语言之一！空字符串，空列表和数字0在Sass中都是真实的。