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

返回 $string$substring 的第一个索引,如果 $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