• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

3.6 Sass语法基础

在这一章中,我们共介绍了Sass中的变量、数据类型、嵌套、插值以及注释等。

一、Sass变量

在Sass中,我们声明变量使用的是“$”(美元符号)开头。Sass的变量包括3部分:声明符、变量名、值。

语法:

Sass变量

说明:

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

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部