Articles
SASS/SCSS 介紹
SASS 中的列表

SASS 中的列表

本文將說明 SASS 中的列表。

我們將介紹 SASS 列表的基礎和進階用法，並提供實際範例。

YouTube Video

SASS 中的列表

SASS 作為 CSS 的擴展，提供了許多類似程式設計的實用功能。其中，列表在動態定義樣式時是一個非常實用的功能。

什麼是 SASS 列表？

SASS 列表是一組以逗號（,）或空格分隔的值。當需要向 CSS 屬性傳遞多個值或進行迭代時會用到。

1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;

列表的主要特點包括以下幾點：。

  • 列表可以包含任何型別的數值，例如數字、字串或顏色。
  • 可以根據使用情境選擇逗號分隔或空格分隔的列表。

使用列表定義樣式的基本範例

以下是利用列表動態生成簡單邊框樣式的範例。

 1@use "sass:list";
 2
 3$border-widths: 1px, 2px, 3px;
 4
 5.border-example {
 6  @for $i from 1 through list.length($border-widths) {
 7    &-#{list.nth($border-widths, $i)} {
 8      border-width: list.nth($border-widths, $i);
 9    }
10  }
11}

編譯輸出 

 1.border-example-1px {
 2  border-width: 1px;
 3}
 4
 5.border-example-2px {
 6  border-width: 2px;
 7}
 8
 9.border-example-3px {
10  border-width: 3px;
11}
  • 使用 sass:list 模組的 nth() 函數，可以從清單中獲取特定的值。

列表操作

sass:list 模組提供了操作列表的函式，使擷取與新增元素變得容易。

取得元素：nth()

nth() 是一個從列表取得元素的函數。

1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red
  • 在此範例中，nth() 函數用於取得指定位置的值。

檢查索引：index()

index() 是一個用來回傳元素在列表中位置的函式。

1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3
  • 在此程式碼中，index() 用於獲得 blue 這個元素是列表中的第三個項目。

取得列表長度：length()

length() 是回傳列表長度的函數。

1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3
  • 在此範例中，length() 函數用來取得列表中的值的數量。

新增元素：append()

append() 是用來向列表添加元素的函數。

1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle
  • 在這段程式中，append() 函數用來將值加入列表。

替換元素：set-nth()

set-nth() 是一個可將指定位置元素替換為另一個值的函式。

1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue
  • 在程式碼中，set-nth() 被用來將第二個元素替換為 yellow。

合併列表：join()

join() 是一個可合併兩個列表的函式。

1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d
  • 在這段程式碼中，join() 被用來將兩個列表合併成一個。

清單配對：zip()

zip() 是一個將多個列表依序配對成組的函式。

1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)
  • 在這段程式碼中，zip() 被用來將姓名和年齡配對成組。

巢狀列表

列表也可以巢狀，讓它們能像二維陣列一樣使用。

1@use "sass:list";
2
3$nested-list: (red, green), (blue, yellow);
4
5// Accessing elements of a nested list
6$first-sublist: list.nth($nested-list, 1); // (red, green)
7$first-color: list.nth(list.nth($nested-list, 1), 1); // red
  • 藉由處理這種複雜的資料結構，可以實現進階的樣式生成。

實用範例：產生漸層

以下是一個利用列表有效產生漸層的範例。

 1@use "sass:list";
 2@use "sass:math";
 3
 4$colors: red, orange, yellow, green, blue;
 5
 6@function gradient($colors) {
 7  $gradient: ();
 8  $len: list.length($colors);
 9
10  @for $i from 1 through $len {
11    // build "color percent%" string with interpolation
12    $item: "#{list.nth($colors, $i)} #{math.div(100%, $len) * $i}";
13    $gradient: list.append($gradient, $item);
14  }
15
16  @return $gradient;
17}
18
19.background {
20  background: linear-gradient(to right, #{list.join(gradient($colors), ', ')});
21}

編譯輸出 

1.background {
2	background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}

  • 這段程式展示如何在 SCSS 中透過列表自動產生漸層。

    • 漸層使用的顏色定義在 $colors 列表中。
    • 在 gradient() 函數中，根據顏色數量計算並平均分配每個顏色的位置，從而建立漸層的顏色列表。
    • 在 .background 類別中，使用 linear-gradient 組合產生的顏色列表，並套用水平漸層。

  • 由於顏色位置會根據列表長度自動計算，因此只需新增或更改顏色就能輕鬆建立均勻的漸層。

注意事項與最佳實踐

使用列表時可考慮以下幾點：。

  • 列表分隔類型 逗號分隔與空格分隔的列表處理方式不同，需視情況正確選用。

  • 列表大小 動態操作列表時，建議使用 length() 函數檢查大小以確保安全。

  • 巢狀列表管理 處理巢狀列表時，仔細操作索引可避免錯誤。

結論

SASS 列表是動態定義樣式與高效管理複雜設計的強大工具。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video

SASS 中的字串SASS 中的映射（Maps）