简介

        本文用示例介绍Scss的数据类型的用法。

Scss支持的数据类型

SassScript 支持 7 种主要的数据类型：

  1. 数字，1, 2, 13, 10px
  2. 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
  3. 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
  4. 布尔型，true, false
  5. 空值，null
  6. 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
  7. maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

        SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 !important 声明。然而Sass 不会特殊对待这些属性值，一律视为无引号字符串。

字符串

        SassScript 支持 CSS 的两种字符串类型：

  1. 有引号字符串 (quoted strings)，如 "Lucida Grande" 'http://sass-lang.com'；
  2. 无引号字符串 (unquoted strings)，如 sans-serif bold

        编译 CSS 文件时不会改变其类型。只有一种情况例外：使用 #{} (interpolation) 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名：

Scss：

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

编译后的CSS：

body.firefox .header:before {
  content: "Hi, Firefox users!";
}

数组

        数组 (lists) 指 Sass 如何处理 CSS 中 margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif 这样通过空格或者逗号分隔的一系列的值。事实上，独立的值也被视为数组（只包含一个值的数组）。

        数组本身没有太多功能，但 Sass list functions 赋予了数组更多新功能：

  • nth 函数可以直接访问数组中的某一项；
  • join 函数可以将多个数组连接在一起；
  • append 函数可以在数组中添加新值；
  • @each 指令能够遍历数组中的每一项。

        数组中可以包含子数组，比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个数组的数组。如果内外两层数组使用相同的分隔方式，需要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)。改动是：之前的 1px 2px, 5px 6px 使用逗号分割了两个子数组 (comma-separated)，而 (1px 2px) (5px 6px) 则使用空格分割(space-separated)。

        当数组被编译为 CSS 时，Sass 不会添加任何圆括号（CSS 中没有这种写法），所以 (1px 2px) (5px 6px) 与 1px 2px, 5px 6px 在编译后的 CSS 文件中是完全一样的，但是它们在 Sass 文件中却有不同的意义，前者是包含两个数组的数组，而后者是包含四个值的数组。

        用 () 表示不包含任何值的空数组（在 Sass 3.3 版之后也视为空的 map）。空数组不可以直接编译成 CSS，比如编译 font-family: () Sass 将会报错。如果数组中包含空数组或空值，编译时将被清除，比如 1px 2px () 3px 或 1px 2px null 3px。

        基于逗号分隔的数组允许保留结尾的逗号，这样做的意义是强调数组的结构关系，尤其是需要声明只包含单个值的数组时。例如 (1,) 表示只包含 1 的数组，而 (1 2 3,) 表示包含 1 2 3 这个以空格分隔的数组的数组。

Maps

        Maps可视为键值对的集合，键被用于定位值，在css中没有对应的概念。

        和Lists不同，Maps必须被圆括号包围，键值对被逗号分割 。

        Maps中的keys和values可以是sassscript的任何对象（包括任意的sassscript表达式 arbitrary SassScript expressions）。

        和Lists一样，Maps主要为sassscript函数服务。如：

  • map-get函数用于查找键值
  • map-merge函数用于map和新加的键值融合
  • @each命令可添加样式到一个map中的每个键值对。

        Maps可用于任何Lists可用的地方。在List函数中 Map会被自动转换为List ，如： (key1: value1, key2: value2)会被List函数转换为：key1 value1, key2 value2 ，反之则不能。

颜色

        所有的CSS表达式都会返回一个SassScript颜色值，包括很多命名颜色（和无引号字符串难以区分）。

        在压缩模式下，Sass将会输出最小的CSS表达式。例如：在压缩模式下，#FF0000的输出结果是red；在白杏仁模式下输出结果是#FFEBCD。

        很多用户都会遇到的问题是，Sass更偏向于输入的其他模式的格式，被放到选择器里的插值颜色在压缩后的语法是无效的。避免它发生的方法是：如果一个命名颜色将被用于选择器的构建，就将它放到引号里边。