• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 字符串(Strings)

    字符串是字符序列(特别是 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 数字相同的格式,包括科学记数法,它是用 e 数字和 10 的幂之间的一个写成的。由于浏览器对科学记数法的支持历来参差不齐,Sass 总是将其编译为完全扩展的数字。

    @debug 5.2e3; // 5200
    @debug 6e-2; // 0.06
    


    转义

    所有 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"。它们可以包含插值,以及任何未转义的字符,除了:

    • \,可以转义为\\;
    • 'or ",以用于定义该字符串的为准,可以转义为\'or \"
    • 换行符,可以转义为(包括尾随空格)。

    带引号的字符串保证被编译为与原始 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 标识符,遵循下面的语法图。它们可能包括任何地方的插值。

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

    ⚠️注意!
    并非所有标识符都被解析为不带引号的字符串:


    • CSS 颜色名称被解析为颜色。
    • null被解析为Sass 的null值。
    • truefalse,被解析为布尔值。
    • notandor,被解析为布尔运算符。

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


    转义不带引号字符串

    解析不带引号的字符串时,转义的文字文本将被解析为字符串的一部分。例如,被解析为字符\空格、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 有许多获取或返回数字的字符串函数,称为索引,它们引用字符串中的字符。索引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"