字符串

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

💡 Fun fact:

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

SCSS

Sass

    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

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

除了 A 到 F 的字母或 0 到 9 的数字之外的任何字符（甚至是换行符！）都可以通过在其前面写 \ 来包含在字符串中。
任何字符都可以通过写 \，后跟其 Unicode 代码点编号的十六进制表示来包含在字符串中。你可以选择在代码点编号后包含一个空格，以指示 Unicode 数字的结束位置。

  SCSS

  Sass

      
      Playground
    SCSS Syntax@debug "\""; // '"'
@debug \.widget; // \.widget
@debug "\a"; // "\a"（仅包含换行符的字符串）
@debug "line1\a line2"; // "line1\a line2"
@debug "Nat + Liz \1F46D"; // "Nat + Liz 👭"

      
      Playground
    Sass Syntax@debug "\""  // '"'
@debug \.widget  // \.widget
@debug "\a"  // "\a"（仅包含换行符的字符串）
@debug "line1\a line2"  // "line1\a line2"（foo 和 bar 由换行符分隔）
@debug "Nat + Liz \1F46D"  // "Nat + Liz 👭"

💡 Fun fact:

对于允许出现在字符串中的字符，写入 Unicode 转义会产生与直接写入字符完全相同的字符串。

带引号的字符串带引号的字符串 permalink

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

\，可以转义为 \\；
' 或 "，取决于用于定义该字符串的引号，可以转义为 \' 或 \"；
换行符，可以转义为 \a （包括尾随空格）。

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

  SCSS

  Sass

      
      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:

当带引号的字符串通过插值注入到另一个值中时，其引号会被移除！这使得可以轻松地编写包含选择器的字符串，例如，可以将其注入样式规则中而不添加引号。

不带引号的字符串不带引号的字符串 permalink

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

  SCSS

  Sass

      
      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!

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

CSS 颜色名称被解析为颜色。
null 被解析为 Sass 的 null 值。
true 和 false 被解析为布尔值。
not、and 和 or 被解析为布尔运算符。

因此，除非你特别要编写使用不带引号字符串的 CSS 属性值，否则通常最好编写带引号的字符串。

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

Dart Sass: since 1.11.0
LibSass: ✗
Ruby Sass: ✗

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

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

如果它是有效的标识符字符，则在不带引号的字符串中不转义地包含。例如，\1F46D 返回不带引号的字符串 👭。
如果它是除换行符和制表符之外的可打印字符，则在 \ 后包含。例如，\21 返回不带引号的字符串 \!。
否则，包含小写 Unicode 转义并带有尾随空格。例如，\7Fx 返回不带引号的字符串 \7f x。

  SCSS

  Sass

      
      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

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

特殊函数，如 url() 和 element()，其参数的语法与普通 CSS 表达式语法不同。
Unicode 范围标记，如 U+0-7F 或 U+4??。
哈希标记，其值是标识符，但不是有效的十六进制颜色。
值 %。（仅在它不直接位于两个其他值之间时可用，因为否则它会与模运算符产生歧义）
特殊值 !important。

  SCSS

  Sass

      
      Playground
    SCSS Syntax@debug url(https://example.org); // url(https://example.org)
@debug U+4??; // U+4??
@debug #my-background; // #my-background
@debug %; // %
@debug !important; // !important

      
      Playground
    Sass Syntax@debug url(https://example.org)  // url(https://example.org)
@debug U+4??  // U+4??
@debug #my-background  // #my-background
@debug %  // %
@debug !important  // !important

字符串索引字符串索引 permalink

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

  SCSS

  Sass

      
      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"