跟JavaScript一样，Sass也有属于自己的数据类型。在Sass中，共有7种数据类型：

• （1）数字值；
• （2）字符串；
• （3）布尔值；
• （4）颜色值；
• （5）列表值；
• （6）Map值；
• （7）空值null；

接下来，我们在这一节详细介绍一下Sass种的7种数据类型。

一、数字值

在Sass中，数字（Number）是最基本的数据类型，可以是正数、0或负数。数字在Sass中使用非常广泛，大多数都是结合CSS单位来实现的，例如10px、10em或者10%。虽然它们带有单位，但是技术上依然算是数字。

举例：

$lineHeight:1.5;$fontSize:14px;$width:50%;div{    lineHeight:$lineHeight;    font-size:$fontSize;    width:$width;}

编译出来的CSS代码如下：

div{    line-height:1.5;    font-size:14px;    width:50%;}

二、字符串

在JavaScript中，使用单引号（''）或双引号（""）包含的都是字符串，就算它们包含的是一个空格，那也是字符串。但是Sass中的字符串跟JavaScript中的字符串有点不一样。

在Sass中，共有2种字符串：

• （1）有引号的字符串；
• （2）无引号的字符串；

无引号字符串，我们在CSS中是经常遇到的，例如“font-weight:bold”中的bold、“font-family:sans-serif;”中的sans-serif等。Sass引入无引号字符串的目的也是为了与CSS语法一致。

举例：有引号字符串

$logoUrl: "images/logo.png";$cursorUrl: "images/default.cur";$text:"绿叶学习网";div{    background-image:url($logoUrl);    cursor:url($cursorUrl),default;}div:before{    content:$text;}

编译出来的CSS代码如下：

div{    background-image:url("images/logo.png");    cursor:url("images/default.cur"),default;}div:before{    content:"绿叶学习网";}

举例：无引号字符串

$str1:sans-serif;$str2:bold;div{    font-family:$str1;    font-weight:$str2;}

编译出来的CSS代码如下：

div {    font-family: sans-serif;    font-weight: bold;}

三、布尔值

数字值和字符串这2种数据类型的取值有无数种，但是Sass中的布尔值只有2种取值：true和false。

在Sass中，布尔值一般用于“@if…@esle…语句”条件判断，只有条件表达式结果是false或null才会返回false，其他一切将返回true。

举例：无引号字符串

$a:10px;$b:5px;div{    @if($a>$b)    {        display:block;    }    @else    {        display:none;    }}

编译出来的CSS代码如下：

div{    display:block;}

分析：

Sass中的“@if...@else...”跟JavaScript中的“if...else...”是一样的，这个语句我们在后面“Sass @if语句”这一节中会详细介绍。

在这个例子中，($a>$b)返回的是true，所以div的display属性最终取值为block。

四、颜色值

在Sass，有一种特殊的数据类型，那就是“颜色值”。Sass中的颜色值共有4种：

• （1）关键字颜色值，如red；
• （2）十六进制颜色值，如#FFFF00；
• （3）RGB颜色值，如rgb(255,255,0)；
• （4）HSL颜色值，如；hsl(360,50%,50%)；

这几种颜色值都是可以互相转换的，在Sass的颜色运算中，我们都是统一转换为十六进制颜色值然后再计算。对于“Sass颜色运算”，我们在后面章节会详细介绍。

举例：

$fontColor:#FF00FF;$bgColor:blue;div{    color:$fontColor;    background-color:$bgColor;}

编译出来的CSS代码如下：

div{    color: red;    background-color: #FF00FF;}

五、列表值

在Sass中，为我们提供了一种“列表值”的数据类型，这种数据类型跟JavaScript中的数组是相似的，我们可以把它比作“Sass中的数组”。

Sass列表值有2种语法格式，一种是由英文逗号隔开的分隔值，另外一种是由空格隔开的分隔值。

语法：

$列表名: 值1 , 值2 , ... , 值n;$列表名: 值1  值2  ... 值n;

说明：

在Sass中，列表值可以包含0个、1个或多个值，甚至还可以包含多个“子列表值”。Sass中的列表值，往往都是用来处理CSS中类似于以下的属性取值：

margin:10px 20px 30px 40px;padding:10px 20px 30px 40px;font-family:Microsoft YaHei,Arial,Helvetica,sans-serif;

举例：

$font: Arial,Helvetica,sans-serif;$margin:20px 40px;$border:1px solid gray;div{    font:$font;    margin:$margin;    border:$border;}

编译出来的CSS代码如下：

div {    font: Arial, Helvetica, sans-serif;    margin: 20px 40px;    border: 1px solid gray;}

分析：

对于列表值，Sass为我们提供了很多内置的函数，在后面“Sass列表函数”这一章我们会详细介绍。这里我们只需要简单认识一下就可以了。

六、Map值

在Sass中，还为我们提供了另外一种特殊数据类型：Map值。Map值跟JSON值是非常相似的，数据都是以“键/值”的方式成对出现。

语法：

$变量名:(    键名1:值1,    键名2:值2,    ……    键名n:值n);

说明：

Map值的语法结构都是以“(”开始，到“)”结束的。其中“键名”和“值”之间用英文冒号构成对，两个“键名:值”之间用英文逗号分隔。此外还要注意一下，最后一对“键/值”后面是不需要逗号的。

举例：

$theme-color: (    default:     (        bgcolor: #fff,        text-color: #444,        link-color: #39f    ),    primary:    (        bgcolor: #000,        text-color:#fff,        link-color: #93f    ),    negative:     (        bgcolor: #f36,        text-color: #fefefe,        link-color: #d4e    ));

分析：

对于Map值，Sass为我们提供了很多内置的函数，在后面“Sass Map函数”这一章我们会详细介绍。这里小伙伴们不需要深入了解Map值，只需要简单认识一下就可以了。