字符串

字符串是字符序列（具体来说是 Unicode 代码点）。Sass 支持两种内部结构相同但渲染方式不同的字符串：带引号的字符串，例如 "Helvetica Neue"，以及不带引号的字符串（也称为标识符），例如 bold。它们共同涵盖了出现在 CSS 中的不同类型的文本。

💡有趣的事实

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

SCSS

Sass

     游乐场SCSS 语法@use "sass:string";

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

     游乐场Sass 语法@use "sass:string"

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

转义转义永久链接

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

除了 A 到 F 的字母或 0 到 9 的数字之外的任何字符（甚至换行符！）都可以作为字符串的一部分包含在内，方法是在其前面加上 \。
任何字符都可以作为字符串的一部分包含在内，方法是在其前面加上 \，后跟它的 Unicode 代码点编号（以十六进制表示）。您可以在代码点编号后可选地包含一个空格，以指示 Unicode 编号的结束位置。

  SCSS

  Sass

       游乐场SCSS 语法@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 👭"

       游乐场Sass 语法@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 👭"

💡有趣的事实

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

带引号的带引号的永久链接

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

\，可以转义为 \\；
' 或 "，无论哪个用于定义该字符串，都可以转义为 \' 或 \"；
换行符，可以转义为 \a （包括尾随空格）。

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

  SCSS

  Sass

       游乐场SCSS 语法@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"

       游乐场Sass 语法@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 标识符，遵循下面的语法图。它们可以在任何地方包含插值。

  SCSS

  Sass

       游乐场SCSS 语法@debug bold; // bold
@debug -webkit-flex; // -webkit-flex
@debug --123; // --123

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

       游乐场Sass 语法@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 属性的值，否则通常最好编写带引号的字符串。

不带引号的字符串中的转义不带引号的字符串中的转义永久链接

Dart Sass: 自 1.11.0 起
LibSass: ✗
Ruby Sass: ✗

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

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

如果它是有效的标识符字符，则它会被包含在不带引号的字符串中，并且未转义。例如，\1F46D 返回不带引号的字符串 👭。
如果它是可打印字符（而不是换行符或制表符），则它会在 \ 后面包含。例如，\21 返回不带引号的字符串 \!。
否则，小写 Unicode 转义会被包含在内，并带有一个尾随空格。例如，\7Fx 返回不带引号的字符串 \7f x。

  SCSS

  Sass

       游乐场SCSS 语法@use "sass:string";

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

       游乐场Sass 语法@use "sass:string"

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

字符串索引字符串索引永久链接

Sass 有许多字符串函数，这些函数接收或返回数字（称为索引），这些数字引用字符串中的字符。索引 1 指示字符串的第一个字符。请注意，这与许多编程语言中索引从 0 开始不同！Sass 也使得轻松引用字符串的末尾成为可能。索引 -1 指示字符串的最后一个字符，-2 指示倒数第二个字符，依此类推。

  SCSS

  Sass

       游乐场SCSS 语法@use "sass:string";

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

       游乐场Sass 语法@use "sass:string"

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