每日美图

介绍

我们的世界是物质世界，事物之间是存在普遍联系。作为描述物质世界的语言，那么必然也具有相同的特性。可以理解为语言是的简化的现实世界， 在计算机语言中物质可以理解为数据，而物质之间的关系可以理解为数据之间的计算关系，而为了使用不同的数据，我们需要使用变量用来引用数据，就好像数据的名字一样。本章我们将会学习Sass语言世界中的数据。

---

数据

变量作用域

在我们“Sass基于CSS的嵌套扩展”一文的总结中说到过

3.针对CSS样式的三个层次进行了不同的复用 选择器的复用、样式的复用、相同命令空间样式属性的复用；

因为有嵌套的关系，数据有效范围就会出现层级关系，于是就存在局部变量与全局变量的区别

全局变量

不在嵌套规则内定义的变量则可在任何地方使用（全局变量），或者在嵌套规则内定义的内容但是使用了!global 声明了变量

局部变量

在嵌套规则内定义的变量，只能在嵌套规则内有效

声明变量

不论全局变量还是局部变量形式都是$开头，如：

$mycolor声明了一个mycolor的变量

---

类型

数字

1, 2, 13, 10px

字符串

有引号字符串与无引号字符串，"foo", 'bar', baz

一般编译前后字符串不会发生变化，除了使用 #{} (interpolation) 时，其中的有引号字符串将被编译为无引号字符串。

数组

数组是一组有关联且格式统一的一组数据，在Sass中具体表现为通过空格或者逗号分隔的一系列的数值或者字符串

如1px 2px, 3px 4px 是包含 1px 2px 与 3px 4px 两个数组的数组

(1px 2px) (3px 4px) 也是包含1px 2px 与 3px 4px 两个数组的数组

编译后都为1px 2px 3px 4px

Maps

字面意思是地图，地图的作用就是根据坐标找到位置，这里的理解就是根据key找到对应的value

形式如下

(key1: value1, key2: value2)

颜色

Sass(Syntactically Awesome Stylesheets样式语言)，很有必要将颜色单独变为一个专门的数据类型，因为颜色是样式中很重要的一个因素。

写法有如下

1.颜色名

blue

2.16进制写法

#04a3f9

3.R(Red)G(Green)B(Blue)方式表示

rgba(255,0,0,0.5)

关于颜色类型值得注意的有两点

1.颜色数据在以compressed输出格式编译后的文件中，将会以最小的形式输出

如 #FF0000 会变成 red

2.因为颜色变量编译后在压缩格式后可能会出现变化，所以如果在其他地方使用到该颜色数值，那该颜色数值一定要使用引号转变为字符串类型。

布尔型

表示逻辑判断的真假，具体为true, false

2.

空值

空值标志变量不存在,具体的形式为null

总结

我将本章内容总结为一张思维导图，方便各位读者快速阅读理解

总结