6.语法基础
一、Sass变量
在Sass中,我们声明变量使用的是“$”(美元符号)开头。Sass的变量包括3部分:声明符、变量名、值。
语法:
说明:
在Sass中,对于变量的取值有2种方式:(1)一般值;(2)默认值。定义变量的默认值很简单,我们只需要在“变量值”后面加上“!default”就可以了。
代码语言:javascript复制
$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文件顶部声明版权信息。