• 3.Sass的数据类型


    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;

  • 相关阅读:
    基于LORA的无线广域物联网应用系统设计
    使用ESP8266、NodeMCU、机智云改造传统插座为智能插座
    嵌入式技术的智能闭环反馈增氧系统
    pythonyaml文件写法和使用
    this的二种使用方式
    实例变量和局部变量 对象的实例方法
    方法重载
    封装
    面向对象 类
    构造方法
  • 原文地址:https://www.cnblogs.com/hou-yuan-zhen/p/11615325.html
Copyright © 2020-2023  润新知