SASS 中的字串
本文說明了 SASS 中的字串。
我們將會一步步說明 SASS 中字串的基本操作以及進階用法。
YouTube Video
SASS 中的字串
SASS 是一種用於擴展 CSS 的預處理器，而字串則是讓樣式定義更加靈活和動態的重要元素。
字串的基礎知識
SASS 中的字串可以用單引號或雙引號包圍，有時也可以省略引號，直接像識別字一樣書寫。以下是基本的寫法範例。
1// Single quotes
2$single-quoted: 'Hello, World!';
3// Double quotes
4$double-quoted: "Hello, World!";
5// No quotes
6$unquoted: Hello-World;注意事項
- 有引號的字串會直接被視為字串常值。
- 沒有引號的字串通常會被當作 CSS 樣式的 class 名稱或 ID 處理，需注意適當使用。
字串合併
在 SASS 中你可以用 + 運算子來合併字串。
1$greeting: "Hello";
2$name: "Alice";
3
4$result: $greeting + ", " + $name + "!"; // "Hello, Alice!"- 以下程式碼範例展示了如何利用 SASS 的
+運算子將多個字串合併成新字串。
進階範例：產生類別名稱
1$base-class: "btn";
2$modifier: "primary";
3
4.class-name {
5 content: $base-class + "--" + $modifier; // "btn--primary"
6}- 此程式碼範例說明如何用 SASS 的
+運算子將基礎類別名稱和修飾詞結合，產生新的類別名稱。
使用字串函式
SASS 提供了許多方便的內建字串函式，例如引號控制及子字串擷取。
quote() 與 unquote()
透過 quote() 和 unquote() 函式，可以為字串加上或移除引號。
1$quoted: quote(Hello); // '"Hello"'
2$unquoted: unquote("Hello"); // Hellostr-length($string)
str-length() 函式可以取得字串的長度。
1$length: str-length("Hello"); // 5str-insert($string, $insert, $index)
str-insert() 函式可以在指定位置插入字串。
1$result: str-insert("Hello", " SASS", 6); // "Hello SASS"str-slice($string, $start-at, [$end-at])
str-slice() 函式可以擷取字串的一部分。
1$substring: str-slice("Hello, World!", 1, 5); // "Hello"to-upper-case() 與 to-lower-case()
to-upper-case() 與 to-lower-case() 這兩個函式分別可以將字串轉換為大寫或小寫。
1$upper: to-upper-case("sass"); // "SASS"
2$lower: to-lower-case("SASS"); // "sass"條件式中的字串運用
利用 SASS 的 @if 指令，你可以根據字串值進行條件分支，根據主題和設定靈活切換樣式。
1$theme: "dark";
2
3@if $theme == "dark" {
4 body {
5 background-color: black;
6 color: white;
7 }
8} @else {
9 body {
10 background-color: white;
11 color: black;
12 }
13}- 此程式碼範例為如何用 SASS 的
@if指令判斷主題是否為dark，並做出相對應的樣式切換。
實用範例：動態生成背景圖片路徑
以下範例展示如何用字串操作生成背景圖片的網址。
1$image-path: "/images/";
2$image-name: "background";
3$image-extension: ".jpg";
4
5.background {
6 background-image: url($image-path + $image-name + $image-extension);
7}編譯結果
1.background {
2 background-image: url("/images/background.jpg");
3}- 這段範例展示了如何在 SASS 中合併字串，動態生成背景圖片路徑並套用於背景。
結合 List 與 Map 運用
結合 SASS 的 List、Map 與字串操作，可讓樣式產生更加靈活。
List 範例
1$states: "hover", "focus", "active";
2
3@each $state in $states {
4 .btn-#{$state} {
5 content: "Button in " + $state + " state";
6 }
7}編譯結果
1.btn-hover {
2 content: "Button in hover state";
3}
4.btn-focus {
5 content: "Button in focus state";
6}
7.btn-active {
8 content: "Button in active state";
9}- 此程式碼範例說明如何用 SASS 的
@each指令，為清單中的每個狀態自動生成類別，並利用字串合併動態設置內容。
Map 範例
1$colors: (
2 "primary": "#3498db",
3 "secondary": "#2ecc71"
4);
5
6@each $name, $color in $colors {
7 .text-#{$name} {
8 color: $color;
9 }
10}編譯結果
1.text-primary {
2 color: #3498db;
3}
4.text-secondary {
5 color: #2ecc71;
6}- 此程式碼範例說明如何透過 SASS 的 Map 將顏色名稱與值關聯，再利用
@each指令自動產生各個類別。
字串跳脫
為了安全地將某些字串作為 CSS 識別字，可能需要加以跳脫。
1$special_character: "example\\@123";
2.#{$special_character} {
3 content: "This is a valid CSS class.";
4}編譯結果
1.example\@123 {
2 content: "This is a valid CSS class.";
3}- 此程式碼範例展示如何在 SASS 中將包含特殊字元的字串作為變數，使用
#{$variable}展開，並將其作為 CSS 中的有效類名使用。
結論
SASS 中的字串操作不僅僅是書寫字串常值，更是動態構建樣式的強大利器。善用本篇介紹的基本操作與函式，能夠讓你的 CSS 更具重用性與可維護性，同時提升設計效率。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。