原文网址：Scss--数据类型--使用/实例_IT利刃出鞘的博客-CSDN博客
简介
本文用示例介绍Scss的数据类型的用法。
Scss支持的数据类型
SassScript 支持 7 种主要的数据类型：
- 数字，1, 2, 13, 10px
- 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
- 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
- 布尔型，true, false
- 空值，null
- 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
- maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)
SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 !important 声明。然而Sass 不会特殊对待这些属性值，一律视为无引号字符串。
字符串
SassScript 支持 CSS 的两种字符串类型：
- 有引号字符串 (quoted strings)，如 "Lucida Grande" 'http://sass-lang.com'；
- 无引号字符串 (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更偏向于输入的其他模式的格式，被放到选择器里的插值颜色在压缩后的语法是无效的。避免它发生的方法是：如果一个命名颜色将被用于选择器的构建，就将它放到引号里边。