在CSS属性的基础.上Sass提供了-些名为SassScript的新功能,SassScript可作用于任何属性,允许属性使用变量、算数运算等额外功能.
1.注释
Sass支持标准的CSS多行注释/* */ ,以及单行注释// ,前者会被
完整输出到编译后的CSS文件中,而后者则不会
//单行注释,不会被编译出来
/*多行注释*/
2.定义变量
变量以美元符号开头,赋值方法与CSS属性的写法一样
scss文件:
$color:#ccc;
$width:300px;
body{
color: $color;
}
会编译成如下css文件:
body {
color: #ccc;
}
3.变量的作用域
Sass中变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量) ,不在嵌套规则内定义的变量则可在任何地方使用(全局变量)
.scss文件:
$color:#ccc;//定义全局变量
$width:300px;
body{
color: $color;
div{
$color:red;//定义局部变量
color: $color;
}
}
编译后,.css文件
body {
color: #ccc;
}
body div {
color: red;
}
通过! global声明,将局部变量转换为全局变量
语法:
div{
$color:red!global;
}
4.数据类型
SassScript支持6种主要的数据类型
数字,1, 2, 13, 10px
字符串,有引号字符串与无引号字符串,"foo", 'bar', baz
颜色,blue, #04a3f9, rgba(255,0,0,0.5)
布尔型, true, false
空值,null
数组(list),用空格或逗号作分隔符, 1.5em 1em 0 2em, Helvetica,Arial, sans-serif
maps, 相当于JavaScript的object , (key1: value1, key2: value2)
.scss文件
$color:#ccc #fff #000;
body{
color: nth($color,1);
div{
color:nth($color, 2);
}
}
编译后.css文件
body {
color: #ccc;
}
body div {
color: #fff;
}
5.Sass基本特性-运算
程序中的运算是常见的一-件事情,但在CSS中能做运算的,到目前为止仅有calc()函数可行。但在Sass中,运算只是其基本特性之一
Sass运算包括
数字运算: +.-.*,/, %
颜色值运算
字符串运算
布尔运算:支持布尔型的and、or 、not 运算
数组运算:数组不支持任何运算方式,只能使用list functions控制
.scss文件
//加法
div{ width:(100px +20px); }
//减法
div{ width:(100px-20px); }
//乘法
div{ width:(100px * 2); }
//除法
div{ width:(100px/12); }
$contentwidth:200px;
$borderwidth:20px;
.box{
width:($contentwidth+ $borderwidth)*2;
}
编译后.css文件:
div {
width: 120px;
}
div {
width: 80px;
}
div {
width: 200px;
}
div {
width: 8.33333px;
}
.box {
width: 440px;
}
插值语句
使用CSS预处理器语言的一个主要原因是想使用Sass获得一个更好的结构体系
通过#{}插值语句可以在选择器或属性名中使用变量。
.scss文件:
$name:"box";
$attrname:"border";
p.#{$name}{
content: name+"zhangsan";
#{$attrname}:1px solide black
}
编译后.css文件:
p.box {
content: namezhangsan;
border: 1px solide black;
}