字符串

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

💡 Fun fact:

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

¥You can convert a quoted string to an unquoted string using the string.unquote() function, and you can convert an unquoted string to a quoted string using the string.quote() function.

Playground

SCSS Syntax

@use "sass:string";

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

Sass Syntax

@use "sass:string"

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

转义转义 permalink

¥Escapes

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

¥All Sass strings support the standard CSS escape codes:

  • 除了 A 到 F 的字母或 0 到 9 的数字（甚至是换行符！）之外的任何字符都可以通过在其前面写入 \ 来包含为字符串的一部分。

    ¥Any character other than a letter from A to F or a number from 0 to 9 (even a newline!) can be included as part of a string by writing \ in front of it.

  • 任何字符都可以作为字符串的一部分包含在内，方法是先写入 \，然后再写入 十六进制 中写入的 Unicode 码位编号。你可以选择在代码点编号后添加一个空格，以指示 Unicode 编号的结束位置。

    ¥Any character can be included as part of a string by writing \ followed by its Unicode code point number written in hexadecimal. You can optionally include a space after the code point number to indicate where the Unicode number ends.

Playground

SCSS Syntax

@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 👭"
Playground

Sass Syntax

@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 👭"

💡 Fun fact:

对于允许出现在字符串中的字符，编写 Unicode 转义符会生成与编写字符本身完全相同的字符串。

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

引用引用 permalink

¥Quoted

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

¥Quoted strings are written between either single or double quotes, as in "Helvetica Neue". They can contain interpolation, as well as any unescaped character except for:

  • \，可以转义为 \\；

    ¥\, which can be escaped as \\;

  • ' 或 "，用于定义该字符串，可以转义为 \' 或 \"；

    ¥' or ", whichever was used to define that string, which can be escaped as \' or \";

  • 换行符，可以转义为 \a （包括尾随空格）。

    ¥newlines, which can be escaped as \a (including a trailing space).

引用的字符串保证被编译为与原始 Sass 字符串具有相同内容的 CSS 字符串。确切的格式可能会根据实现或配置而有所不同 - 包含双引号的字符串可能会编译为 "\"" 或 '"'，并且非 ASCII 字符可能会或可能不会被转义。但在任何符合标准的 CSS 实现（包括所有浏览器）中都应该以相同的方式解析它。

¥Quoted strings are guaranteed to be compiled to CSS strings that have the same contents as the original Sass strings. The exact format may vary based on the implementation or configuration—a string containing a double quote may be compiled to "\"" or '"', and a non-ASCII character may or may not be escaped. But that should be parsed the same in any standards-compliant CSS implementation, including all browsers.

Playground

SCSS Syntax

@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"
Playground

Sass Syntax

@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"

💡 Fun fact:

当通过插值将带引号的字符串注入另一个值时，它的引号被删除！这使得编写包含选择器的字符串变得很容易，例如，可以将其注入样式规则而无需添加引号。

¥When a quoted string is injected into another value via interpolation, its quotes are removed! This makes it easy to write strings containing selectors, for example, that can be injected into style rules without adding quotes.

不加引号不加引号 permalink

¥Unquoted

不带引号的字符串被写为 CSS 身份标识，遵循下面的语法图。它们可能在任何地方都包含 插值法。

¥Unquoted strings are written as CSS identifiers, following the syntax diagram below. They may include interpolation anywhere.

Railroad diagram copyright © 2018 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and permissive document license rules apply.
Playground

SCSS Syntax

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

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

Sass Syntax

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

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

⚠️ Heads up!

并非所有标识符都被解析为不带引号的字符串：

¥Not all identifiers are parsed as unquoted strings:

因此，编写带引号的字符串通常是一个好主意，除非你专门编写使用不带引号的字符串的 CSS 属性的值。

¥Because of this, it’s generally a good idea to write quoted strings unless you’re specifically writing the value of a CSS property that uses unquoted strings.

不带引号的字符串中的转义不带引号的字符串中的转义 permalink

¥Escapes in Unquoted Strings

兼容性 (Normalization):
Dart Sass
since 1.11.0
LibSass
✗
Ruby Sass
✗

LibSass、Ruby Sass 和旧版本的 Dart Sass 不会规范标识符中的转义。相反，不带引号的字符串中的文本是用户编写的确切文本。例如，\1F46D 和 👭 不被视为等效。

¥LibSass, Ruby Sass, and older versions of Dart Sass don’t normalize escapes in identifiers. Instead, the text in the unquoted string is the exact text the user wrote. For example, \1F46D and 👭 are not considered equivalent.

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

¥When an unquoted string is parsed, the literal text of escapes are parsed as part of the string. For example, \a is parsed as the characters \, a, and space. In order to ensure that unquoted strings that have the same meanings in CSS are parsed the same way, though, these escapes are normalized. For each code point, whether it’s escaped or unescaped:

  • 如果它是有效的标识符字符，则它将不转义地包含在不带引号的字符串中。例如，\1F46D 返回不带引号的字符串 👭。

    ¥If it’s a valid identifier character, it’s included unescaped in the unquoted string. For example, \1F46D returns the unquoted string 👭.

  • 如果它是除换行符或制表符之外的可打印字符，则它包含在 \ 之后。例如，\21 返回不带引号的字符串 \!。

    ¥If it’s a printable character other than a newline or a tab, it’s included after a \. For example, \21 returns the unquoted string \!.

  • 否则，小写 Unicode 转义将包含在尾随空格中。例如，\7Fx 返回不带引号的字符串 \7f x。

    ¥Otherwise, the lowercase Unicode escape is included with a trailing space. For example, \7Fx returns the unquoted string \7f x.

Playground

SCSS Syntax

@use "sass:string";

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

Sass Syntax

@use "sass:string"

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

字符串索引字符串索引 permalink

¥String Indexes

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

¥Sass has a number of string functions that take or return numbers, called indexes, that refer to the characters in a string. The index 1 indicates the first character of the string. Note that this is different than many programming languages where indexes start at 0! Sass also makes it easy to refer to the end of a string. The index -1 refers to the last character in a string, -2 refers to the second-to-last, and so on.

Playground

SCSS Syntax

@use "sass:string";

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

Sass Syntax

@use "sass:string"

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