Sass（六）中文文档2：SassScript、变量、数据类型（字符串、数组 、maps）、运算（颜色值运算、字符串运算、数组运算list functions）、插值语句 `#{}`、`!defaul

Sass（六）中文文档2：SassScript、变量、数据类型（字符串、数组 、maps）、运算（颜色值运算、字符串运算、数组运算list functions）、插值语句 #{}、!default

总结：

• SassScript

  • 变量
    • 将局部变量转换为全局变量可以添加 !global 声明
  • 数据类型
    • 数字，1, 2, 13, 10px
    • 字符串
      • 有引号字符串与无引号字符串，"foo", 'bar', baz
      • 上面两种在编译 CSS 文件时不会改变其类型，只有一种情况例外：
        • 使用 #{} (interpolation) 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名
    • 颜色
      • blue, #04a3f9, rgba(255,0,0,0.5)
      • 插入选择器的颜色在压缩时语法无效。
    • 布尔型，true, false
    • 空值，null
    • 数组 (list)
      • 用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
      • Sass list functions
        • nth 函数可以直接访问数组中的某一项；
        • join 函数可以将多个数组连接在一起；
        • append 函数可以在数组中添加新值；
        • 而 @each 指令能够遍历数组中的每一项。
      • 空数组
        • 用 () 表示不包含任何值的空数组
        • 空数组不可以直接编译成 CSS，比如编译 font-family: () Sass 将会报错。
        • 如果数组中包含空数组或空值，编译时将被清除
      • 逗号
        • 基于逗号分隔的数组允许保留结尾的逗号，这样做的意义是强调数组的结构关系，尤其是需要声明只包含单个值的数组时
        • 例如 (1,) 表示只包含 1 的数组，而 (1 2 3,) 表示包含 1 2 3 这个以空格分隔的数组的数组。
    • maps,
      • 相当于 JavaScript 的 object，(key1: value1, key2: value2)
      • 必须被圆括号包围
      • 函数
        • map-get函数用于查找键值，
        • map-merge函数用于map和新加的键值融合，
        • @each命令可添加样式到一个map中的每个键值对。
      • 与List
        • 在List函数中 Map会被自动转换为List ， 如 (key1: value1, key2: value2)会被List函数转换为 key1 value1, key2 value2 ，反之则不能。

• 运算

  • 数字运算符

    • /
      • 通常起到分隔数字的用途
      • 除法运算的功能，下面3种情况被视为除法运算符
        • 如果值，或值的一部分，是变量或者函数的返回值
        • 如果值被圆括号包裹
        • 如果值是算数表达式的一部分
      • 如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

  • 颜色值运算

    • 分段计算进行的

    • 数字与颜色值之间也可以进行算数运算，同样也是分段计算的

    • alpha channel（第4位颜色值）

      • 算术运算不会作用于 alpha 值

        p {
                    
          color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
        }
        ------------------------------------
        p {
                    
          color: rgba(255, 255, 0, 0.75); }
        

    • 颜色值的 alpha channel 可以通过 ==opacify （浑浊，对alpha channel进行加运算）或 transparentize （透明化，对alpha channel进行减运算）==两个函数进行调整。

      $translucent-red: rgba(255, 0, 0, 0.5);
      p {
                
        color: opacify($translucent-red, 0.3);
        background-color: transparentize($translucent-red, 0.25);
      }
      -----------------------------------------
      p {
                
        color: rgba(255, 0, 0, 0.8);
        background-color: rgba(255, 0, 0, 0.25); }
      

  • 字符串运算

    • + 可用于连接字符串
      • 如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，
      • 相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
      • +左面有无引号决定最后结果有无引号
      • 其他情况下被当做数字+运算符

  • 布尔运算

  • SassScript 支持布尔型的 and or 以及 not 运算。

  • 数组运算

    • 数组不支持任何运算方式，只能使用 list functions 控制。
      • nth 函数可以直接访问数组中的某一项；
      • join 函数可以将多个数组连接在一起；
      • append 函数可以在数组中添加新值；
      • 而 @each 指令能够遍历数组中的每一项。

• 插值语句 #{}

  • #{} 插值语句可以在选择器或属性名中使用变量

  • 大多数情况下，这样可能还不如使用变量方便，但是使用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS。

    p {
            
      $font-size: 12px;
      $line-height: 30px;
      font: #{
            $font-size}/#{
            $line-height};
    }
    ----------------------------------------------
    p {
            
      font: 12px/30px; } //没有进行除法运算
    

• !default

  • 如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

    $content: "First content";
    $content: "Second content?" !default;
    $new_content: "First time reference" !default;
    
    #main {
            
      content: $content;
      new-content: $new_content;