sass语法基础

2022-05-14 08:01:43 浏览数 (1)

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文件顶部声明版权信息。

0 人点赞