sass语法基础

6.语法基础

一、Sass变量

在Sass中，我们声明变量使用的是“$”（美元符号）开头。Sass的变量包括3部分：声明符、变量名、值。

语法：

说明：

在Sass中，对于变量的取值有2种方式：（1）一般值；（2）默认值。定义变量的默认值很简单，我们只需要在“变量值”后面加上“!default”就可以了。

$width:10p;               //定义变量的一般值

$width:10px !default;     //定义变量的默认值

二、数据类型

在Sass中，共有7种数据类型：

（1）数字值，如10、10px、10%等；

（2）字符串，如"微软雅黑"、sans-serif等；

（3）布尔值，如true、false；

（4）颜色值，如#FF00FF、RGB(255,0,255)、hsl(360,50%,50%)；

（5）列表值，如“10px 20px 30px 40px”（空格隔开）或“YaHei,Arial,Helvetica,sans-serif”（逗号隔开）；

（6）Map值，简单了解即可；

（7）空值null；

三、Sass嵌套

Sass为我们提供了一种方便的操作方式：嵌套。在Sass中，共有3种嵌套方式：

（1）选择器嵌套；

（2）属性嵌套；

（3）伪类嵌套；

四、Sass插值

在Sass中，我们可以通过使用插值的方式来实现在“选择器名”、“属性名”以及“属性值”中插入一个“变量的值”，从而来“构造”一个新的选择器名、新的属性名以及新的属性值。

语法：

#{变量}

五、Sass注释

在Sass中，共有3种注释方式：

（1）/*注释内容*/

（2）//注释内容

（3）/*!注释内容*/

第1种注释方式在编译后不会保留下来，第2种和第3种注释方式在编译后都会保留下来。其中，第3种注释方式用得较少，一般用于CSS文件顶部声明版权信息。