1.Sass的注释:
在说Sass的数据类型之前,先提一提Sass中注释的两种方式。
(1).类似CSS的注释方式,如: /* 这里是一段注释 */
(2).类似JavaScript的注释方式,如 //这里是一段注释
这两种方式都可以用来在Sass中注释,但是有一些区别。第一种方式,注释的内容也会在编译出的CSS中显示,而第二种不会显示。我们来看一个例子:
//定义一个占位符
%mt5 {
margin-top: 5px;
}
/*调用一个占位符*/
.box {
@extend %mt5;
}
上边的Sass编译后如下:
.box {
margin-top: 5px;
}
/*调用一个占位符*/
2.Sass的数据类型:
Sass的数据类型和JavaScript还是很相似的,但是也具有自己独有的数据类型,这里来列举一下:
数字: 如1、2、13、10px;
字符串: 有引号字符串或无引号字符串,如“bar”、'nav'、tittle;
颜色: 如,blue,#04a3f9,rgba(255,0,0,0.5);
布尔值:如,true,false
空值:如,null
值列表: 用空格或者逗号将多个值分开, 如 2px 5px 、1px solid red;
tips:Sass中也支持一些其他的CSS属性值,如!important声明等。
这里提一下Sass的列表函数对值列表的一些操作:
1.nth函数:可以直接访问值列表中的某一项。
2.join函数:可以将多个值列表连接在一起
3.append函数:可以在值列表中添加值。
4.@each:能够给值列表中每个项目添加样式。
具体的写法和用法,会在后边的Sass函数的部分提及。