Lzh on GitHub

Strings

字符串是字符序列（特别是 Unicode 码点）。Sass 支持两种内部结构相同但渲染方式不同的字符串：带引号的字符串，如 "Helvetica Neue"，和不带引号的字符串（也称为标识符），如 bold。这两者共同涵盖了 CSS 中出现的不同类型的文本。

字符串是字符序列（特别是 Unicode 码点）。Sass 支持两种内部结构相同但渲染方式不同的字符串：带引号的字符串，如 "Helvetica Neue"，和不带引号的字符串（也称为标识符），如 bold。这两者共同涵盖了 CSS 中出现的不同类型的文本。

你可以使用 string.unquote() 函数将带引号的字符串转换为不带引号的字符串，并使用 string.quote() 函数将不带引号的字符串转换为带引号的字符串。
@use "sass:string";

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

转义

所有 Sass 字符串都支持标准的 CSS 转义码：

  • 任何非字母 A 到 F 或数字 0 到 9 的字符（甚至是换行符！）都可以通过在其前面写 \ 来作为字符串的一部分。
  • 任何字符都可以通过写 \ 后跟其以十六进制书写的 Unicode 码点号来作为字符串的一部分。你可以在码点号后面选择性地包含一个空格，以指示 Unicode 数字的结束位置。
@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 👭"
对于允许出现在字符串中的字符，编写 Unicode 转义会产生与直接编写该字符完全相同的字符串。

带引号

带引号的字符串写在单引号或双引号之间，如 "Helvetica Neue"。它们可以包含插值，以及除以下字符外的任何未转义字符：

  • \，可以转义为 \\；
  • ' 或 "，以定义该字符串的那个为准，可以转义为 \' 或 \"；
  • 换行符，可以转义为 \a（包括一个尾随空格）。

带引号的字符串保证被编译为与原始 Sass 字符串内容相同的 CSS 字符串。确切的格式可能因实现或配置而异——包含双引号的字符串可能被编译为 \"" 或 '"'，而非 ASCII 字符可能被转义也可能不被转义。但这在任何符合标准的 CSS 实现（包括所有浏览器）中都应该被相同地解析。

@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, Keio, Beihang)。W3C 责任、商标和许可文档许可证规则适用。

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

$prefix: ms;
@debug -#{$prefix}-flex; // -ms-flex
并非所有标识符都被解析为不带引号的字符串：
  • CSS 颜色名称被解析为颜色。
  • null 被解析为 Sass 的 null 值。
  • true 和 false 被解析为布尔值。
  • not、and 和 or 被解析为布尔运算符。
因此，除非你专门编写使用不带引号字符串的 CSS 属性的值，否则通常最好编写带引号的字符串。

不带引号字符串中的转义

当解析不带引号的字符串时，转义的字面文本被解析为字符串的一部分。例如，\a 被解析为字符 \、a 和空格。然而，为了确保在 CSS 中具有相同含义的不带引号字符串以相同的方式被解析，这些转义被规范化。对于每个码点，无论是转义的还是未转义的：

  • 如果它是一个有效的标识符字符，它将以未转义的形式包含在不带引号的字符串中。例如，\1F46D 返回不带引号的字符串 👭。
  • 如果它是一个可打印字符，而不是换行符或制表符，它将被包含在 \ 之后。例如，\21 返回不带引号的字符串 \!。
  • 否则，将包含小写的 Unicode 转义，并在其后加上一个空格。例如，\7Fx 返回不带引号的字符串 \7f x。
@use "sass:string";

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

其他不带引号的字符串

除了标识符，CSS 语法中还有一些不寻常的角落被解析为不带引号的字符串。其中包括：

  • 特殊函数，如 url() 和 element()，它们的参数语法与普通的 CSS 表达式语法不同。
  • Unicode 范围令牌，如 U+0-7F 或 U+4??。
  • 哈希令牌，其值是标识符但不是有效的十六进制颜色。
  • 值 %。（这仅在它不直接位于其他两个值之间时可用，因为否则它会与取模运算符混淆。）
  • 特殊值 !important。
@debug url(https://example.org); // url(https://example.org)
@debug U+4??; // U+4??
@debug #my-background; // #my-background
@debug %; // %
@debug !important; // !important

字符串索引

Sass 有许多字符串函数，它们接受或返回数字，称为索引，这些数字引用字符串中的字符。索引 1 表示字符串的第一个字符。请注意，这与许多索引从 0 开始的编程语言不同！Sass 也使得引用字符串的末尾变得容易。索引 -1 指的是字符串中的最后一个字符，-2 指的是倒数第二个，以此类推。

@use "sass:string";

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