1.在Sass中,共有7种数据类型:
(1)数字值;在Sass中,数字(Number)是最基本的数据类型,可以是正数、0或负数。数字在Sass中使用非常广泛,大多数都是结合CSS单位来实现的,例如10px、10em或者10%。虽然它们带有单位,但是技术上依然算是数字
(2)字符串;在Sass中,共有2种字符串:
1》有引号的字符串;就像是地址,链接
举例:有引号字符串
1 2 3 4 5 6 7 8 9 10 11 12$logoUrl: "images/logo.png";
$cursorUrl: "images/default.cur";
$text:"绿叶学习网";
div
{
background-image:url($logoUrl);
cursor:url($cursorUrl),default;
}
div:before
{
content:$text;
}
2》无引号的字符串;无引号字符串,我们在CSS中是经常遇到的,例如“font-weight:bold”中的bold、“font-family:sans-serif;”中的sans-serif等。Sass引入无引号字符串的目的也是为了与CSS语法一致。
(3)布尔值;Sass中的布尔值只有2种取值:true和false。
在Sass中,布尔值一般用于“@if…@esle…语句”条件判断,只有条件表达式结果是false或null才会返回false,其他一切将返回true。
举例:无引号字符串
1 2 3 4 5 6 7 8 9 10 11 12 13$a:10px;
$b:5px;
div
{
@if($a>$b)
{
display:block;
}
@else
{
display:none;
}
}
编译出来的CSS代码如下:
1 2 3 4div
{
display
:
block
;
}
(4)颜色值;
在Sass,有一种特殊的数据类型,那就是“颜色值”。Sass中的颜色值共有4种:
- (1)关键字颜色值,如red;
- (2)十六进制颜色值,如#FFFF00;
- (3)RGB颜色值,如rgb(255,255,0);
- (4)HSL颜色值,如;hsl(360,50%,50%);
这几种颜色值都是可以互相转换的,在Sass的颜色运算中,我们都是统一转换为十六进制颜色值然后再计算
(5)列表值;
在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代码如下:
(6)Map值;
(7)空值null;