列表

Dart Sass: ✓
LibSass: 自 3.5.0 版本起
Ruby Sass: 自 3.5.0 版本起

舊版的 LibSass 和 Ruby Sass 不支援使用方括號的列表。

列表包含一系列其他的值。在 Sass 中，列表中的元素可以透過逗號 (Helvetica, Arial, sans-serif)、空格 (10px 15px 0 0) 或斜線分隔，只要在列表中保持一致即可。與大多數其他語言不同，Sass 中的列表不需要特殊的括號；任何以空格或逗號分隔的表達式都被視為列表。然而，您可以使用方括號 ([line1 line2]) 撰寫列表，這在使用 grid-template-columns 時非常有用。

Sass 列表可以包含一個甚至零個元素。單元素列表可以寫成 (<expression>,) 或 [<expression>]，而零元素列表可以寫成 () 或 []。此外，所有列表函式都會將不在列表中的個別值視為包含該值的列表，這表示您很少需要明確地建立單元素列表。

⚠️ 注意！

不帶括號的空列表不是有效的 CSS 語法，因此 Sass 不允許您在屬性值中使用它。

以斜線分隔的列表以斜線分隔的列表永久連結

Sass 中的列表可以用斜線分隔，表示像是 font: 12px/30px 這樣的速記語法，用於設定 font-size 和 line-height，或者像是 hsl(80 100% 50% / 0.5) 的語法，用於建立具有給定不透明度的顏色。但是，**目前無法直接寫出以斜線分隔的列表。** Sass 過去使用 / 字元表示除法，因此在現有的樣式表過渡到使用 math.div() 的過程中，以斜線分隔的列表只能使用 list.slash() 來撰寫。

更多詳細資訊，請參閱重大變更：斜線作為除法。

使用列表使用列表永久連結

Sass 提供了一些函式，讓您可以使用列表來撰寫強大的樣式庫，或者讓應用程式的樣式表更簡潔、更容易維護。

索引索引永久連結

許多函式會使用或返回稱為 *索引* 的數字，用於參考列表中的元素。索引 1 表示列表中的第一個元素。請注意，這與許多程式語言中索引從 0 開始不同！Sass 也讓參考列表結尾變得更容易。索引 -1 指的是列表中的最後一個元素，-2 指的是倒數第二個元素，依此類推。

存取元素存取元素永久連結

如果無法從列表中取出值，列表就沒有多大用處。您可以使用 list.nth($list, $n) 函式來取得列表中指定索引的元素。第一個參數是列表本身，第二個參數是您要取出的值的索引。

  SCSS

  Sass

       PlaygroundSCSS 語法@use 'sass:list';

@debug list.nth(10px 12px 16px, 2); // 12px
@debug list.nth([line1, line2, line3], -1); // line3

       PlaygroundSass 語法@use 'sass:list'

@debug list.nth(10px 12px 16px, 2)  // 12px
@debug list.nth([line1, line2, line3], -1)  // line3

對每個元素執行操作對每個元素執行操作永久連結

這實際上沒有使用函式，但它仍然是最常用的列表使用方法之一。 @each 規則會針對列表中的每個元素評估程式碼區塊，並將該元素指定給一個變數。

  SCSS

  Sass

  CSS

       PlaygroundSCSS 語法$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

       PlaygroundSass 語法$sizes: 40px, 50px, 80px

@each $size in $sizes
  .icon-#{$size}
    font-size: $size
    height: $size
    width: $size

CSS 輸出.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

新增至列表新增至列表永久連結

將元素新增至列表也很有用。 list.append($list, $val) 函式接受一個列表和一個值，並返回列表的副本，其中該值已新增到列表的末尾。請注意，由於 Sass 列表是不可變的，它不會修改原始列表。

  SCSS

  Sass

       PlaygroundSCSS 語法@debug append(10px 12px 16px, 25px); // 10px 12px 16px 25px
@debug append([col1-line1], col1-line2); // [col1-line1, col1-line2]

       PlaygroundSass 語法@debug append(10px 12px 16px, 25px)  // 10px 12px 16px 25px
@debug append([col1-line1], col1-line2)  // [col1-line1, col1-line2]

在列表中尋找元素在列表中尋找元素永久連結

如果您需要檢查元素是否在列表中或找出它的索引，請使用 list.index($list, $value) 函式。這個函式接受一個列表和一個要在該列表中定位的值，並返回該值的索引。

  SCSS

  Sass

       PlaygroundSCSS 語法@use 'sass:list';

@debug list.index(1px solid red, 1px); // 1
@debug list.index(1px solid red, solid); // 2
@debug list.index(1px solid red, dashed); // null

       PlaygroundSass 語法@use 'sass:list'

@debug list.index(1px solid red, 1px)  // 1
@debug list.index(1px solid red, solid)  // 2
@debug list.index(1px solid red, dashed)  // null

如果值不在列表中，list.index() 會返回 null。因為 null 是假值，您可以使用 list.index() 搭配 @if 或 if() 來檢查列表是否包含指定的值。

  SCSS

  Sass

       PlaygroundSCSS 語法@use "sass:list";

$valid-sides: top, bottom, left, right;

@mixin attach($side) {
  @if not list.index($valid-sides, $side) {
    @error "#{$side} is not a valid side. Expected one of #{$valid-sides}.";
  }

  // ...
}

       PlaygroundSass 語法@use "sass:list"

$valid-sides: top, bottom, left, right

@mixin attach($side)
  @if not list.index($valid-sides, $side)
    @error "#{$side} is not a valid side. Expected one of #{$valid-sides}."


  // ...

不可變性不可變性永久連結

Sass 中的列表是*不可變的*，這表示列表值的内容永遠不會改變。Sass 的所有列表函數都會返回新的列表，而不是修改原始列表。不可變性有助於避免許多隱藏的錯誤，這些錯誤可能在不同樣式表區塊共用同一個列表時潛入。

不過，您仍然可以透過將新的列表賦值給同一個變數來隨著時間更新狀態。這通常用於函數和混入 (mixin) 中，以將一堆值收集到一個列表中。

  SCSS

  Sass

       PlaygroundSCSS 語法@use "sass:list";
@use "sass:map";

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms);

@function prefixes-for-browsers($browsers) {
  $prefixes: ();
  @each $browser in $browsers {
    $prefixes: list.append($prefixes, map.get($prefixes-by-browser, $browser));
  }
  @return $prefixes;
}

@debug prefixes-for-browsers("firefox" "ie"); // moz ms

       PlaygroundSass 語法@use "sass:list"
@use "sass:map"

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms)

@function prefixes-for-browsers($browsers)
  $prefixes: ()
  @each $browser in $browsers
    $prefixes: list.append($prefixes, map.get($prefixes-by-browser, $browser))

  @return $prefixes


@debug prefixes-for-browsers("firefox" "ie")  // moz ms

參數列表參數列表永久連結

當您宣告一個接受任意參數的混入或函數時，您獲得的值是一個稱為*參數列表*的特殊列表。它的作用就像一個包含傳遞給混入或函數的所有參數的列表，並具有一個額外功能：如果使用者傳遞了關鍵字參數，則可以透過將參數列表傳遞給 meta.keywords() 函數來將它們作為映射存取。

  SCSS

  Sass

  CSS

       PlaygroundSCSS 語法@use "sass:meta";

@mixin syntax-colors($args...) {
  @debug meta.keywords($args);
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)

       PlaygroundSass 語法@use "sass:meta"

@mixin syntax-colors($args...)
  @debug meta.keywords($args)
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args)
    pre span.stx-#{$name}
      color: $color




@include syntax-colors($string: #080, $comment: #800, $variable: #60b)




CSS 輸出pre span.stx-string {
  color: #080;
}

pre span.stx-comment {
  color: #800;
}

pre span.stx-variable {
  color: #60b;
}

列表

⚠️ 注意！

以斜線分隔的列表以斜線分隔的列表 永久連結

使用列表使用列表 永久連結

索引索引 永久連結

存取元素存取元素 永久連結

SCSS 語法

Sass 語法

對每個元素執行操作對每個元素執行操作 永久連結

SCSS 語法

Sass 語法

CSS 輸出

新增至列表新增至列表 永久連結

SCSS 語法

Sass 語法

在列表中尋找元素在列表中尋找元素 永久連結

SCSS 語法

Sass 語法

SCSS 語法

Sass 語法

不可變性不可變性永久連結

SCSS 語法

Sass 語法

參數列表參數列表永久連結

SCSS 語法

Sass 語法

CSS 輸出

以斜線分隔的列表以斜線分隔的列表永久連結

使用列表使用列表永久連結

索引索引永久連結

存取元素存取元素永久連結

對每個元素執行操作對每個元素執行操作永久連結

新增至列表新增至列表永久連結

在列表中尋找元素在列表中尋找元素永久連結