Sass语法基础总结

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

查看更多关于Sass语法基础总结的详细内容...