@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 永久連結

@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 永久連結

您也可以透過 @else if <表達式> { ... } 的寫法來選擇是否執行 @else 規則的程式碼區塊。如果您這樣做，則只有在前面的 @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;
}

真值與假值真值與假值永久連結

在允許 true 或 false 的任何地方，您也可以使用其他值。值 false 和 null 是「假值」，這表示 Sass 將它們視為表示錯誤並導致條件失敗。其他所有值都被視為「真值」，因此 Sass 將它們視為如同 true 並導致條件成功。

例如，如果您想檢查一個字串是否包含空格，您可以直接寫 string.index($string, " ")。string.index() 函式 如果找不到字串則返回 null，否則返回一個數字。