• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

3.2 数据类型

跟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%;
}

分析:

小伙伴们对于“line-height:1.5;”这个可能感到比较陌生,line-height属性为什么可以取无单位的数值呢?事实上,line-height属性非常复杂,具体请查看“HTML和CSS进阶教程”中“7.4 深入line-height”这一节。

二、字符串

在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值,只需要简单认识一下就可以了。

此外,对于JSON,可以关注我们的“JSON教程”,对比理解一下。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部