3.Sass的数据类型

Posted 2022-12-10 hou-yuan-zhen

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 4

div     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；