当前位置 : 主页 > 网页制作 > css >

3.Sass的数据类型

来源:互联网 收集:自由互联 发布时间:2021-06-13
1.在Sass中,共有7种数据类型: (1)数字值 ;在Sass中,数字(Number)是最基本的数据类型,可以是正数、0或负数。数字在Sass中使用非常广泛,大多数都是结合CSS单位来实现的,例如

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;

上一篇:4.Scss嵌套
下一篇:cf589div2
网友评论