字串

字串是由字元組成的序列（具體來說是Unicode 編碼點）。Sass 支援兩種內部結構相同但呈現方式不同的字串：引號字串，例如 "Helvetica Neue"，以及無引號字串（也稱為「識別符號」），例如 bold。這兩種字串涵蓋了 CSS 中出現的不同種類的文字。

💡 小知識

您可以使用 string.unquote() 函式將引號字串轉換為無引號字串，也可以使用 string.quote() 函式將無引號字串轉換為引號字串。

程式碼遊樂場

SCSS 語法

@use "sass:string";

@debug string.unquote(".widget:hover"); // .widget:hover
@debug string.quote(bold); // "bold"
程式碼遊樂場

Sass 語法

@use "sass:string"

@debug string.unquote(".widget:hover")  // .widget:hover
@debug string.quote(bold)  // "bold"

跳脫字元跳脫字元永久連結

所有 Sass 字串都支援標準 CSS 跳脫字元代碼

  • 除了 A 到 F 的字母和 0 到 9 的數字之外的任何字元（甚至是換行符號！）都可以透過在其前面加上 \ 來包含在字串中。

  • 任何字元都可以透過在其前面加上 \，後面接著以十六進位表示的Unicode 編碼點數字來包含在字串中。您也可以選擇在編碼點數字後面加上一個空格，以指示 Unicode 數字的結尾。

程式碼遊樂場

SCSS 語法

@debug "\""; // '"'
@debug \.widget; // \.widget
@debug "\a"; // "\a" (a string containing only a newline)
@debug "line1\a line2"; // "line1\a line2"
@debug "Nat + Liz \1F46D"; // "Nat + Liz 👭"
程式碼遊樂場

Sass 語法

@debug "\""  // '"'
@debug \.widget  // \.widget
@debug "\a"  // "\a" (a string containing only a newline)
@debug "line1\a line2"  // "line1\a line2" (foo and bar are separated by a newline)
@debug "Nat + Liz \1F46D"  // "Nat + Liz 👭"

💡 小知識

對於允許出現在字串中的字元，編寫 Unicode 跳脫序列會產生與編寫字元本身完全相同的字串。

引號字串引號字串永久連結

引號字串寫在單引號或雙引號之間，例如 "Helvetica Neue"。它們可以包含插值，以及任何未跳脫的字元，除了

  • \，可以跳脫為 \\；
  • ' 或 "，用於定義該字串的引號，可以跳脫為 \' 或 \"；
  • 換行符，可以跳脫為 \a （包含一個尾隨空格）。

引號字串保證會被編譯成內容與原始 Sass 字串相同的 CSS 字串。確切的格式可能會根據實作或配置而有所不同——包含雙引號的字串可能會被編譯成 "\"" 或 '"'，而一個非ASCII 字元可能會被跳脫也可能不會。但在任何符合標準的 CSS 實作（包括所有瀏覽器）中，它們的解析方式應該相同。

程式碼遊樂場

SCSS 語法

@debug "Helvetica Neue"; // "Helvetica Neue"
@debug "C:\\Program Files"; // "C:\\Program Files"
@debug "\"Don't Fear the Reaper\""; // "\"Don't Fear the Reaper\""
@debug "line1\a line2"; // "line1\a line2"

$roboto-variant: "Mono";
@debug "Roboto #{$roboto-variant}"; // "Roboto Mono"
程式碼遊樂場

Sass 語法

@debug "Helvetica Neue"  // "Helvetica Neue"
@debug "C:\\Program Files"  // "C:\\Program Files"
@debug "\"Don't Fear the Reaper\""  // "\"Don't Fear the Reaper\""
@debug "line1\a line2"  // "line1\a line2"

$roboto-variant: "Mono"
@debug "Roboto #{$roboto-variant}"  // "Roboto Mono"

💡 小知識

當引號字串透過插值注入到另一個值時，它的引號會被移除！這使得編寫包含選擇器的字串變得容易，例如，可以將其注入到樣式規則中而無需添加引號。

無引號字串無引號字串永久連結

無引號字串以 CSS 識別字 的形式編寫，遵循以下語法圖。它們可以在任何位置包含插值。

鐵路圖版權所有 © 2018 W3C®（MIT、ERCIM、慶應義塾大學、北京航空航天大學）。W3C 的責任、商標和寬鬆文件授權規則適用。
程式碼遊樂場

SCSS 語法

@debug bold; // bold
@debug -webkit-flex; // -webkit-flex
@debug --123; // --123

$prefix: ms;
@debug -#{$prefix}-flex; // -ms-flex
程式碼遊樂場

Sass 語法

@debug bold  // bold
@debug -webkit-flex  // -webkit-flex
@debug --123  // --123

$prefix: ms
@debug -#{$prefix}-flex  // -ms-flex

⚠️ 注意！

並非所有識別字都會被解析為無引號字串

因此，除非您特意編寫使用無引號字串的 CSS 屬性值，否則通常最好編寫引號字串。

無引號字串中的跳脫序列無引號字串中的跳脫序列永久連結

相容性（正規化）
Dart Sass
自 1.11.0 起
LibSass
✗
Ruby Sass
✗

LibSass、Ruby Sass 和舊版本的 Dart Sass 不會正規化識別字中的跳脫序列。相反地，無引號字串中的文字就是使用者編寫的文字。例如，\1F46D 和 👭 不被視為等效。

解析無引號字串時，跳脫序列的字面文字會被解析為字串的一部分。例如，\a 會被解析為字元 \、a 和空格。但是，為了確保在 CSS 中具有相同含義的無引號字串以相同的方式解析，這些跳脫序列會被*正規化*。對於每個程式碼點，無論它是跳脫的還是未跳脫的

  • 如果是有效的識別碼字元，則會未經跳脫直接包含在未加引號的字串中。例如，`\1F46D` 會返回未加引號的字串 `👭`。

  • 如果是換行符號或定位符號以外的可列印字元，則會在 `\` 之後包含它。例如，`\21 ` 會返回未加引號的字串 `\!`。

  • 否則，會包含帶有尾端空格的小寫 Unicode 跳脫序列。例如，`\7Fx` 會返回未加引號的字串 `\7f x`。

程式碼遊樂場

SCSS 語法

@use "sass:string";

@debug \1F46D; // 👭
@debug \21; // \!
@debug \7Fx; // \7f x
@debug string.length(\7Fx); // 5
程式碼遊樂場

Sass 語法

@use "sass:string"

@debug \1F46D  // 👭
@debug \21  // \!
@debug \7Fx  // \7f x
@debug string.length(\7Fx)  // 5

字串索引字串索引永久連結

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

程式碼遊樂場

SCSS 語法

@use "sass:string";

@debug string.index("Helvetica Neue", "Helvetica"); // 1
@debug string.index("Helvetica Neue", "Neue"); // 11
@debug string.slice("Roboto Mono", -4); // "Mono"
程式碼遊樂場

Sass 語法

@use "sass:string"

@debug string.index("Helvetica Neue", "Helvetica")  // 1
@debug string.index("Helvetica Neue", "Neue")  // 11
@debug string.slice("Roboto Mono", -4)  // "Mono"