Sass数据类型

SassScript包含了七种不同的数据类型：numbers, strings, colors, Booleans, null, lists 和 maps。

Number

SassScript可以识别单个数字类型，因此你无需担心操作导致整数还是实数。在进行数值运算的时候，单位必须相同或兼容。

下面的数值操作是正确的：

test: 10 + 3;    //"plain" numbers added together
test: 10px + 3;  //"plain" number added to a pixel value
test: 10em + 3em; //two "em" values added together

但是如果我们输入：10px+2em；操作将会报错，因为px和em不兼容。

假设运算操作正确（例如px和px），SassScript将会在输出中保留单位。例如，下面的代码：

p {
   font-size: 3em * 1.5;
}

将会输出以下结果：

p {
   font-size: 4.5em;
}

单位”em”将会保留。

String

你可以使用双引号，单引号或根本没有引号（字符串）来创建字符串。

$default-font: 'Lucida';

p {
    font-family: $default-font, "Ariel", sans-serif;
}

上面的代码将会输出以下结果：

p {
    font-family: 'Lucida', "Ariel", sans-serif;
}

你还可以使用#{<var>}插值来引用变量的内容，并删除任何引号。

$class-name: "foo";

a.#{$class-name} {
   color: blue;
}

上面的代码将会输出以下结果:

a.#foo {
   color: blue;
}

插值配合mixin一起使用，将会非常强大，我们将在混入章节中详解解释。

Color

SassScript支持使用：十六进制，命名如red，rgb表达式，rgba表达式，hsl表达式来表示颜色。

SassScript还支持一些非常方便的颜色函数，我们将在后面的文章中详细讲解。

List

SassScript列表是由空格或逗号分隔的一系列值。 以下两个变量的内容将被SassScript视为列表：

$body-font: Helvetica, Arial, sans-serif;
$body-margin: 0 0 10px 15px;

列表不必包含简单值; 它们也可以包含其他列表：

$random-list: 10, 10 0, 3;

上面的代码，只含有三个值，而不是四个值。第二个值是一个列表。

看起来好像会让人有点困惑，我们可以将上面的代码用括号包裹，改为这样：

$random-list: 10, (10 0), 3;

此语法清楚地表明了第二个值是嵌套列表，你还可以使用括号作为整个列表或单个元素的占位符：

$empty-list: ();
$missing-list: 10px () 30px 0;

Map

在SassScript中，Map是键值对。 它们的语法与列表略有不同：它们必须以逗号分隔，并且将整个映射必须用括号括起来：

$red-map: (light: #e57373, medium: #f44336, dark: #b71c1c);

Map不会直接输出到CSS中，我们一般使用Map来检查索引值。我们先来看一个简单的例子：

$red-map: (light: #e57373, medium: #f44336, dark: #b71c1c);

p {
   color: map-get($red-map, light);
}

map-get（）函数接受一个map和一个键，并返回该键的值。上面的代码将会返回以下CSS：

p {
   color: $e57373;
}

Booleans & Nulls

SassScript支持两个布尔值，true和false，以及null值null。 这些在CSS中没有直接意义，但它们配合控制指令结合使用将会非常有用。