SASS 內建模組
本文說明 SASS 的內建模組。
我們將從基礎到進階，循序講解 SASS 的內建模組。
YouTube Video
SASS 內建模組
SASS 提供多種內建模組，善用它們能讓樣式表撰寫更高效。
什麼是 SASS 的內建模組？
SASS 的內建模組提供可重複使用的函式與 mixin。使用它們能更輕鬆地進行複雜計算並建立自訂樣式。
主要的內建模組包括：。
sass:colorsass:stringsass:mathsass:listsass:mapsass:selectorsass:meta
每個模組都包含可簡化特定任務的功能。
各模組的詳細說明與範例
sass:color 模組
sass:color 模組提供讓色彩操作更容易的函式。
主要函式
mix(): 混合兩種顏色adjust(): 同時調整色相、亮度、飽和度等屬性
使用範例
1@use "sass:color";
2
3$primary-color: #3498db;
4$secondary-color: #e74c3c;
5
6// Mix two colors with equal weight
7$blended-color: color.mix($primary-color, $secondary-color, 50%);
8
9// Adjust hue by 45 degrees using color.adjust()
10$adjusted-color: color.adjust($primary-color, $hue: 45deg);
11
12div {
13 background-color: $blended-color; // Result of mixing two colors
14 border-color: $adjusted-color; // Hue adjusted by 45 degrees
15}- 這段程式碼會透過混合兩種顏色產生新色，並生成另一個調整過色相的顏色。產生的顏色會套用到元素的背景與邊框顏色。此範例有助於理解色彩操作的基礎。
sass:string 模組
sass:string 模組提供對字串操作很有用的函式。
主要函式
quote(),unquote(): 加上或移除字串的引號length(): 取得字串長度to-upper-case(),to-lower-case(): 將字串轉成大寫或小寫
使用範例
1@use "sass:string";
2
3// base values
4$base-url: "https://example.com";
5$path: "/assets/style.css";
6
7// 1) Combine strings using interpolation and then quote the result
8$full-quoted: string.quote("#{$base-url}#{$path}");
9// Example result: "\"https://example.com/assets/style.css\""
10
11// 2) Remove quotes from a quoted string
12$full-unquoted: string.unquote($full-quoted);
13// Example result: https://example.com/assets/style.css
14
15// 3) Get the length of the unquoted string
16$url-length: string.length($full-unquoted);
17// Example output: number of characters in the URL
18
19// 4) Convert strings to upper/lower case and quote for safe CSS output
20$block-name: "main-header";
21// "MAIN-HEADER"
22$upper-quoted: string.quote(string.to-upper-case($block-name));
23// "main-footer"
24$lower-quoted: string.quote(string.to-lower-case("MAIN-FOOTER"));
25
26a::after {
27 /* Use quoted strings for content to ensure valid CSS */
28 content: $full-quoted; /* "https://example.com/assets/style.css" */
29}
30
31:root {
32 /* Insert numeric values with interpolation when needed */
33 --url-length: #{ $url-length }; /* Example: --url-length: 31; */
34}
35
36.header::before {
37 /* Output uppercase version */
38 content: $upper-quoted; /* "MAIN-HEADER" */
39}
40
41.footer::after {
42 /* Output lowercase version */
43 content: $lower-quoted; /* "main-footer" */
44}- 使用
string.quote()與string.unquote()可精準控制輸出 CSS 中字串的呈現。string.length()是用來取得字串長度的函式。string.to-upper-case()/string.to-lower-case()對於產生類別名稱與格式化 BEM 命名很實用。
sass:math 模組
sass:math 模組提供數學計算相關的函式。
主要函式
pow(): 次方運算sqrt(): 平方根abs(): 絕對值round(),ceil(),floor(): 四捨五入、無條件進位、無條件捨去
使用範例
1@use "sass:math";
2
3// Using pow() to calculate exponential values
4$base-size: math.pow(2, 3) * 10px; // 80px
5
6// Using sqrt() to compute a square root
7$root-size: math.sqrt(144) * 1px; // 12px
8
9// Using abs() to ensure a positive value
10$offset: math.abs(-15px); // 15px
11
12// Using round(), ceil(), and floor() for different rounding methods
13$rounded: math.round(12.6px); // 13px
14$ceiled: math.ceil(12.1px); // 13px
15$floored: math.floor(12.9px); // 12px
16
17.container {
18 width: $base-size; // 80px
19 height: $root-size; // 12px
20 margin-left: $offset; // 15px
21}
22
23.values {
24 /* Demonstrating different rounding operations */
25 padding: $rounded; // 13px
26 border-width: $ceiled; // 13px
27 margin-top: $floored; // 12px
28}math.pow()與math.sqrt()對尺寸計算很有用，而math.abs()及各種取整函式有助於處理調整。搭配使用即可輕鬆計算一致的 UI 比例。
sass:list 模組
sass:list 模組提供專門針對清單操作的函式。
主要函式
append(): 新增元素join(): 合併清單nth(): 取得指定位置的元素length(): 取得清單長度
使用範例
1@use "sass:list";
2
3// Base list
4$colors: ("red", "blue", "green");
5
6// Add an element to the end of the list
7$colors-appended: list.append($colors, "yellow");
8// ("red", "blue", "green", "yellow")
9
10// Add an element to the beginning of the list using join()
11$colors-prepended: list.join(("black",), $colors);
12// ("black", "red", "blue", "green", "yellow")
13
14// Join two lists together
15$extra-colors: ("pink", "cyan");
16$merged-colors: list.join($colors-prepended, $extra-colors);
17// ("black", "red", "blue", "green", "yellow", "pink", "cyan")
18
19// Get list length
20$total-length: list.length($merged-colors);
21
22// Example usage in a loop: assign each color to a list item
23ul {
24 @for $i from 1 through $total-length {
25 li:nth-child(#{$i}) {
26 /* Get the color at index $i */
27 color: list.nth($merged-colors, $i);
28 }
29 }
30}- 你可以用
append()將元素添加到列表尾端，並使用join()靈活地合併多個列表。如果你想在開頭新增一個元素，可以用join()把單元素列表加在前面。結合length()和nth()，更容易產生需要動態處理列表的 UI 樣式。
sass:map 模組
sass:map 模組提供用於操作 map（關聯陣列）的函式。
主要函式
get(): 取得鍵對應的值set(): 新增或更新鍵值對keys(): 取得所有鍵
使用範例
1@use "sass:map";
2
3// Base theme map
4$theme-colors: (
5 "primary": #3498db,
6 "secondary": #e74c3c
7);
8
9// Update or add a value using set()
10$updated-theme: map.set($theme-colors, "warning", #f1c40f);
11// Map now has "warning": #f1c40f added
12
13// Get a value from the map
14$primary-color: map.get($updated-theme, "primary");
15
16// Get all keys from the map
17$all-keys: map.keys($updated-theme);
18// Example: ("primary", "secondary", "warning")
19
20button {
21 /* Apply color retrieved from the theme map */
22 background-color: $primary-color;
23}
24
25.debug {
26 /* Print keys as content for demonstration */
27 content: "#{$all-keys}";
28}- 使用
map.set()可動態更新 map，搭配map.get()能建立更彈性的主題結構。透過map.keys()可列出設定項，有助於設計可延伸的樣式。
sass:selector 模組
sass:selector 模組提供有助於選擇器操作的函式。
主要函式
nest(): 巢狀化選擇器is-superselector(): 檢查選擇器包含關係replace(): 取代選擇器
使用範例
1@use "sass:selector";
2
3// Nest selectors (combine parent and child)
4$nested-selector: selector.nest(".parent", ".child");
5// Result: ".parent .child"
6
7// Check if one selector is a superselector of another
8$is-super: selector.is-superselector(".parent", $nested-selector);
9// true because ".parent" matches all elements that
10// ".parent .child" can match as an ancestor
11
12// Replace part of a selector with another selector
13$replaced-selector: selector.replace(".parent .child", ".child", ".item");
14// Result: ".parent .item"
15
16// Use generated selectors in actual CSS output
17#{$nested-selector} {
18 /* Applies to .parent .child */
19 color: red;
20}
21
22@if $is-super {
23 .info::after {
24 /* Demonstrate boolean result */
25 content: "parent is a superselector";
26 }
27}
28
29#{$replaced-selector} {
30 /* Applies to .parent .item */
31 background: blue;
32}- 使用
selector.nest()可彈性組合選擇器，並以selector.is-superselector()驗證它們的關係。再搭配selector.replace()，即可精簡地處理進階的選擇器生成邏輯。
sass:meta 模組
sass:meta 模組提供對 SASS 進行後設程式設計（meta-programming）很有用的功能。
主要函式
variable-exists(): 檢查變數是否存在global-variable-exists(): 檢查全域變數是否存在inspect(): 為除錯顯示值
使用範例
1@use "sass:meta";
2
3// Define a global variable
4$color: #3498db;
5
6// Check if a variable exists in the current scope
7@if meta.variable-exists("color") {
8 body {
9 /* Apply style only if $color exists */
10 background-color: $color;
11 }
12}
13
14// Create a local variable inside a block
15.container {
16 $local-size: 20px;
17
18 @if meta.variable-exists("local-size") {
19 /* Demonstrates detection of local variable */
20 width: $local-size;
21 }
22}
23
24// Check if a global variable exists
25$result: meta.global-variable-exists("color"); // true
26
27.debug {
28 /* Use inspect() to output the inspected value as a string */
29 content: meta.inspect($result); // "true"
30}meta.variable-exists()與meta.global-variable-exists()可讓你依作用域安全地判定變數狀態。meta.inspect()對除錯非常有用，能以字串形式顯示值。
實用範例
結合多個內建模組可進一步提升 SASS 的表現力。以下範例同時使用 color、math 與 list 模組，來自動化色彩處理與清單操作。
1@use "sass:color";
2@use "sass:math";
3@use "sass:list";
4
5// Base color list
6$base-colors: (#3498db, #e74c3c, #2ecc71);
7$darkened-colors: (); // Empty list for processed colors
8
9// Loop through each base color and darken it by 10%
10@each $color in $base-colors {
11 $darkened-colors: list.append(
12 $darkened-colors,
13 // Darken color by decreasing lightness by 10%
14 color.adjust($color, $lightness: -10%)
15 );
16}
17
18div {
19 // Apply each processed color to a corresponding <div>
20 @for $i from 1 through list.length($darkened-colors) {
21 &:nth-child(#{$i}) {
22 // Set color by index
23 background-color: list.nth($darkened-colors, $i);
24 }
25 }
26}- 在這段程式碼中，經過處理的顏色會依序用
list.append()添加，並用color.adjust()搭配$lightness: -10%讓顏色變暗 10%。最後，結合@for與list.nth()，為每個<div>套用不同的背景色。
總結
SASS 的內建模組大幅提升 CSS 的彈性。理解各個模組並適當運用後，便能編寫更高效、易維護的樣式表。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。