scss-数据类型

　　scss当前支持七种主要数据类型

　　（1）.数字，1, 2, 13, 10px。

　　（2）.字符串，有引号字符串与无引号字符串，"foo", 'bar', baz。

　　（3）.颜色，blue, #04a3f9, rgba(255,0,0,0.5)。

　　（4）.布尔型，true, false。

　　（5）.空值，null。

　　（6）.数组 (list)，用空格或逗号作分隔符。

　　（7）.maps, 相当于 JavaScript对象直接量。

　　SCSS也支持其他 CSS 属性值，比如Unicode 字符集，或!important声明。然而SCSS不会特殊对待这些属性值，一律视为无引号字符串。

　　一、Number类型

　　SCSS中的Number类型与其他编程语言是类似的，但是不同点也很突出。

　　如下数据在SCSS都是Number类型:

1, 2, 13, 10px。

　　但是在其他编程语言中，10px基本不可能是Number类型；

　　在SCSS中，很多时候数字结合CSS单位依然是一个Number类型。

　　看如下代码实例:

$size: 5;
$px-unit: $size * 1px;
$px-string: $size + px;
$px-number: $px-unit / 1px;

　　声明一个变量，并赋值为5，自然它是一个Number类型。

　　（1）.$px-unit：Number类型，1px可以认为是一个数字，是一个数字之间的乘法运算。

　　（2）.$px-string：String类型，px单独出现会被看做一个字符串，使用+号，那么就是字符串连接操作。

　　（3）.$px-number：Number类型，SCSS中允许带有相同单位的除法操作，结果是5。

　　二、String类型

　　在CSS中字符串常常用于字体样式或其他的属性的样式。SCSS中的字符串和CSS一样，在SCSS中，使用单引号('')或双引号("")包裹的都是字符串，就是他们包裹的是一个空

格，那也是字符串。

$name: 'i' + ' babyli'; 　　　　　　　　　　// 'i babyli'
$date: 'Month/Year : ' + 10/2018; 　　　　// 'Month/Year : 10/2018'
$date: 'Month/Year : ' + (10/2018); 　　// 'Month/Year : 0.00496'
$variable: 10/2018;  　　　　　　　　　　　// 0.00496
$just-string: '10/2018';  　　　　　　　　// '10/2018'

　　像$name存储了一个字符串，有趣的是，在第二次声明中，10/2018并没有计算，而是当作一个字符串。这也就是说，字符串也可以和其他数据类型连接在一起。但是，字符串依旧

不能和null连接。

　　在第三次声明中，$variable直接计算了10/2018，而不是字符串，主要是因为没有别的字符串和他连接在一起。如果你希望让变量$variable存储类似10/2018作为字符串，就必须

像后面声明的变量$just-string一样，需要用引号(单引号或双引号)括起来。

　　如果你想在一个字符串是使用一个变量，而你又不想让这个变量直接变成了字符串，那就得使用到一个被称为变量插值，简单点说，就是使用#{}来包裹这个变量。来看一个简单

的示例：

$name: 'Gajendar';
$author: 'Author : $name'; 　　　　　　// 'Author : $name' $author: 'Author :
#{$name}'; 　　　　　　　　　　　　　　　// 'Author : Gajendar'

　　

　　三、Color类型

　　CSS颜色表达式属于颜色数据类型，比如颜色十六进制符号、rgb、rgba、hsl、hsla和使用关键词(如red等)。

　　SCSS主要提供一些额外的功能，这样就可以更有效的使用颜色。代码实例如下:

$color: yellowgreen; 　　　　　　　　// #9ACD32
$color: lighten($color, 15%); 　　// #b8dc70
$color: darken($color, 15%); 　　// #6c9023
$color: saturate($color, 15%); // #a1e01f
$color: desaturate($color, 15%); // #93ba45
$color: (green + red); 　　　　// #ff8000

　　

　　四、布尔类型

　　SCSS中的布尔类型和其他语言的布尔类型类似，只有两个值:

　　（1）.true。

　　（2）.false。

　　在SCSS中，只有自身是false和null才会返回false，其他一切都将返回true。

$i-am-true: true;
$a-number: 2; body {
  @if not $i-am-true {
    background: rgba(255, 0, 0, 0.6);
  } @else {
    background: rgba(0, 0, 255, 0.6); // expected
  }
}
.warn {
  @if not $a-number {
    color: white;
    font-weight: bold;
    font-size: 1.5em;
  } @else {
    display: none; // expected
  }
}

　　上面的代码编译如下:

body {
  background: rgba(0, 0, 255, 0.6);
}
.warn {
  display: none;
}

　　

　　五、Null类型

　　SCSS中也具有Null类型，与JavaScript类似，它代表空。

　　如果将其转换为布尔值，结果是false。由于它代表空，所以不能够使用它来进行字符串连接:

null+"ibabyli"

　　上面类似的操作会报错。

　　六、List列表

　　列表(lists) 是指 SCSS 如何表示在CSS声明的，类似margin: 10px 15px 0 0 或 font-face: Helvetica, Arial, sans-serif 这样的值，列表只是一串其他值，无论是用空格还是用逗号隔

开。事实上，独立的值也被视为列表：只包含一个值的列表。

　　列表本身没有太多的功能，但 SCSS list functions 赋予了数组更多新功能：nth 函数可以直接访问数组中的某一项；join 函数可以将多个数组连接在一起；append 函数可以在数组

中添加新值；而 @each 指令能够遍历数组中的每一项。

　　除了包含简单的值，列表可包含其他列表。例如，1px 2px, 5px 6px包含1px 2px列表和5px 6px列表两个项。如果内外两层列表使用相同的分隔符号，你需要使用括号将内层列表

括起来，以明确内层类别的开始和结束位置。

　　例如，(1px 2px) (5px 6px) 同样是包含1px 2px列表和5px 6px列表两个项的列表。不同的是，该列表外层用空格分隔，之前列表外层是用逗号分隔。

当列表被编译为 CSS 时，SCSS不会添加任何圆括号，因为CSS不能识别他们。这意味着， (1px 2px) (5px 6px) 和1px 2px 5px 6px 在编译后的 CSS 文件中看起来是完全一样的。然

而，它们在 SCSS 中却是不同的：第一个是含两个列表的列表，而第二个是含有四个成员的列表。

　　列表也可以没有任何项。这些列表可以用 () 表示（也是一个空的 map）。空数组不可以直接编译成 CSS，比如编译 font-family: () Sass 将会报错。如果数组中包含空数组或空

值，编译时将被清除，比如 1px 2px () 3px 或 1px 2px null 3px。

　　逗号分隔的列表可以保留结尾的逗号。这是特别有用，因为它可以表示一个 单个元素的列表。

　　例如，(1,)表示为只包含1的列表，而(1 2 3,)这个表示包含一个列表，这个列表又包含以空格分隔的1, 2 和 3的列表。

// 定义一个列表
$px: 5px 10px 15px 20px;
#main {
margin-top:nth($px, 1);
margin-right: nth($px, 2);
margin-bottom: nth($px, 3);
margin-left: nth($px, 4);
}

// 编译后的 CSS 文件
#main {
    margin-top: 5px;
    margin-right: 10px;
    margin-bottom: 15px;
    margin-left: 20px;
}

　　列表合并

$px1: 5px 10px 15px;
$px2: 1px 2px 3px;

$px: join($px1, $px2); // 5px 10px 15px 1px 2px 3px

　　添加新值

$px: 5px 10px 15px 20px;
$px: append($px, 11px); // 将 11px 添加到 $px 中

　　七、Map对象

　　如果说scss的list对应于JavaScript数组，那么scss的map就对应这个JavaScript对象直接量。

　　它是一种映射任何类型键值对（可以是任何类型，包括内嵌maps，不过不推荐这种内嵌方式）的数据结构。

　　代码实例:

$map: (
  $key1: value1,
  $key2: value2,
  $key3: value3
)

　　上面是scss中map的一个简单代码实例，再来看一下JavaScript对象直接量的结构:

let object= {
  webName:"babyli",
  age:19,
  address:"湖北省武汉市"
}

　　scss中的map语法结构

　　（1）.map名称前要有一个$。

　　（2）.名称后面是一个冒号。

　　（3）.冒号后面是小括号。

　　（4）.小括号中的数据是以key:value键值对的形式存在的。

　　（5）.键值对之间使用逗号分隔，最后一个后面无需逗号。

　　map中可以嵌套map，代码实例如下:

$map: (
  key1: value1,
  key2: (
    key-1: value-1,
    key-2: value-2,
  ),
  key3: value3
);

　　map在很多应用中是非常便利的，比如网站的皮肤管理，就可以将皮肤的样式存储在嵌套的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
  )
)

　　scss内置了七个用来专门操作map的函数:

　　（1）.map-get($map,$key)：根据给定key，返回map中对应的value。

　　（2）.map-merge($map1,$map2)：将两个map合并成一个新的map。

　　（3）.map-remove($map,$key)：从map中删除一个key，返回一个新map。

　　（4）.map-keys($map)：返回map中所有的key。

　　（5）.map-values($map)：返回map中所有的value。

　　（6）.map-has-key($map,$key)：根据给定key判断map是否有对应value，有返回true，否则false。

　　（7）.keywords($args)：返回一个函数的参数，这个参数可以动态的设置key和value。