sass:string

相容性
Dart Sass
自 1.23.0 版本起
LibSass
✗
Ruby Sass
✗

目前只有 Dart Sass 支援使用 @use 載入內建模組。其他實作的使用者必須改用全域名稱呼叫函式。

string.quote($string)
quote($string) //=> string

將 $string 作為帶引號的字串傳回。

程式碼遊樂場

SCSS 語法

@use "sass:string";

@debug string.quote(Helvetica); // "Helvetica"
@debug string.quote("Helvetica"); // "Helvetica"
程式碼遊樂場

Sass 語法

@use "sass:string"

@debug string.quote(Helvetica)  // "Helvetica"
@debug string.quote("Helvetica")  // "Helvetica"

string.index($string, $substring)
str-index($string, $substring) //=> number

傳回 $substring 在 $string 中的第一個索引，如果 $string 不包含 $substring 則傳回 null。

程式碼遊樂場

SCSS 語法

@use "sass:string";

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

Sass 語法

@use "sass:string"

@debug string.index("Helvetica Neue", "Helvetica")  // 1
@debug string.index("Helvetica Neue", "Neue")  // 11

string.insert($string, $insert, $index)
str-insert($string, $insert, $index) //=> string

傳回 $string 的副本，其中在$index處插入了 $insert。

程式碼遊樂場

SCSS 語法

@use "sass:string";

@debug string.insert("Roboto Bold", " Mono", 7); // "Roboto Mono Bold"
@debug string.insert("Roboto Bold", " Mono", -6); // "Roboto Mono Bold"
程式碼遊樂場

Sass 語法

@use "sass:string"

@debug string.insert("Roboto Bold", " Mono", 7)  // "Roboto Mono Bold"
@debug string.insert("Roboto Bold", " Mono", -6)  // "Roboto Mono Bold"

如果 $index 高於 $string 的長度，則將 $insert 新增到結尾。如果 $index 小於字串的負長度，則將 $insert 新增到開頭。

程式碼遊樂場

SCSS 語法

@use "sass:string";

@debug string.insert("Roboto", " Bold", 100); // "Roboto Bold"
@debug string.insert("Bold", "Roboto ", -100); // "Roboto Bold"
程式碼遊樂場

Sass 語法

@use "sass:string"

@debug string.insert("Roboto", " Bold", 100)  // "Roboto Bold"
@debug string.insert("Bold", "Roboto ", -100)  // "Roboto Bold"

string.length($string)
str-length($string) //=> number

傳回 $string 中的字元數。

程式碼遊樂場

SCSS 語法

@use "sass:string";

@debug string.length("Helvetica Neue"); // 14
@debug string.length(bold); // 4
@debug string.length(""); // 0
程式碼遊樂場

Sass 語法

@use "sass:string"

@debug string.length("Helvetica Neue")  // 14
@debug string.length(bold)  // 4
@debug string.length("")  // 0

string.slice($string, $start-at, $end-at: -1)
str-slice($string, $start-at, $end-at: -1) //=> string

傳回 $string 的切片，從索引 $start-at 開始，到索引 $end-at 結束（包含兩者）。

程式碼遊樂場

SCSS 語法

@use "sass:string";

@debug string.slice("Helvetica Neue", 11); // "Neue"
@debug string.slice("Helvetica Neue", 1, 3); // "Hel"
@debug string.slice("Helvetica Neue", 1, -6); // "Helvetica"
程式碼遊樂場

Sass 語法

@use "sass:string"

@debug string.slice("Helvetica Neue", 11)  // "Neue"
@debug string.slice("Helvetica Neue", 1, 3)  // "Hel"
@debug string.slice("Helvetica Neue", 1, -6)  // "Helvetica"

string.split($string, $separator, $limit: null) //=> list
相容性
Dart Sass
自 1.57.0 版本起
LibSass
✗
Ruby Sass
✗

傳回一個以括號括起來、逗號分隔的 $string 子字串列表，這些子字串由 $separator 分隔。這些子字串中不包含 $separator。

如果 $limit 是數字 1 或更高，則最多在這麼多個 $separator 上分割（因此最多傳回 $limit + 1 個字串）。最後一個子字串包含字串的其餘部分，包括任何剩餘的 $separator。

程式碼遊樂場

SCSS 語法

@use "sass:string";

@debug string.split("Segoe UI Emoji", " "); // ["Segoe", "UI", "Emoji"]
@debug string.split("Segoe UI Emoji", " ", $limit: 1); // ["Segoe", "UI Emoji"]
程式碼遊樂場

Sass 語法

@use "sass:string"

@debug string.split("Segoe UI Emoji", " ")  // ["Segoe", "UI", "Emoji"]
@debug string.split("Segoe UI Emoji", " ", $limit: 1)  // ["Segoe", "UI Emoji"]

string.to-upper-case($string)
to-upper-case($string) //=> string

傳回 $string 的副本，其中 ASCII 字母已轉換為大寫。

程式碼遊樂場

SCSS 語法

@use "sass:string";

@debug string.to-upper-case("Bold"); // "BOLD"
@debug string.to-upper-case(sans-serif); // SANS-SERIF
程式碼遊樂場

Sass 語法

@use "sass:string"

@debug string.to-upper-case("Bold")  // "BOLD"
@debug string.to-upper-case(sans-serif)  // SANS-SERIF

string.to-lower-case($string)
to-lower-case($string) //=> string

傳回 $string 的副本，其中 ASCII 字元已轉換為小寫。

程式碼遊樂場

SCSS 語法

@use "sass:string";

@debug string.to-lower-case("Bold"); // "bold"
@debug string.to-lower-case(SANS-SERIF); // sans-serif
程式碼遊樂場

Sass 語法

@use "sass:string"

@debug string.to-lower-case("Bold")  // "bold"
@debug string.to-lower-case(SANS-SERIF)  // sans-serif

string.unique-id()
unique-id() //=> string

傳回一個隨機產生的未加引號的字串，保證是一個有效的 CSS 識別符號，並且在目前的 Sass 編譯過程中是唯一的。

程式碼遊樂場

SCSS 語法

@use "sass:string";

@debug string.unique-id(); // uabtrnzug
@debug string.unique-id(); // u6w1b1def
程式碼遊樂場

Sass 語法

@use "sass:string"

@debug string.unique-id(); // uabtrnzug
@debug string.unique-id(); // u6w1b1def

string.unquote($string)
unquote($string) //=> string

以未加引號的字串形式傳回 $string。這可能會產生無效的 CSS 字串，因此請謹慎使用。

程式碼遊樂場

SCSS 語法

@use "sass:string";

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

Sass 語法

@use "sass:string"

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