字符串 Strings

字符串是字符序列(特别是 Unicode 代码点)。 Sass 支持两种内部结构相同但渲染方式不同的字符串：带引号的字符串，如"Helvetica Neue"，和不带引号的字符串(也称为 identifiers)，如“粗体”。 这些共同涵盖了出现在 CSS 中的不同类型的文本。

💡 有趣的事实：

您可以使用 string.unquote() 函数 将带引号的字符串转换为不带引号的字符串，并且可以使用 string.quote() 函数。

@use "sass:string";

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

Escapes

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

• 除了从 A 到 F 的字母或从 0 到 9 的数字(甚至是换行符！)之外的任何字符都可以通过在其前面写“\”来作为字符串的一部分。
• 通过在 Unicode 代码点编号 后面写入以 [十六进制](https:// en.wikipedia.org/wiki/Hexadecimal)。 您可以选择在代码点编号后添加一个空格，以指示 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 👭"

💡 Fun fact:

For characters that are allowed to appear in strings, writing the Unicode escape produces exactly the same string as writing the character itself.

Quoted

带引号的字符串写在单引号或双引号之间，如“Helvetica Neue”。 它们可以包含 interpolation，以及任何未转义的字符，除了：

• \，可以转义为 \\；
• ' 或 "，以用于定义该字符串为准，可以转义为 \' 或 \"；
• 换行符，可以转义为 \a(包括尾随空格)。

带引号的字符串保证被编译为与原始 Sass 字符串具有相同内容的 CSS 字符串。 确切的格式可能因实施或配置而异——包含双引号的字符串可能会被编译为 "\"" or '"'，以及非 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 标识符。 它们可以在任何地方包含 interpolation。

铁路图版权所有 © 2018 W3C^®(MIT、ERCIM、Keio、北航)。 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 被解析为 Booleans。
• 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

字符串索引

Sass 有许多字符串函数 可以获取或返回数字，称为_indexes_，它引用字符串中的字符。 索引 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"