1.变量
在Sass中使用$符号定义变量。
$defaultColor: #fff;
在sass可以直接使用变量：
$defaultColor: #fff;
body {
background：$defaultColor; //编译后#fff
}
注意，sass也有变量作用域，如果你在一个选择器内部定义了一个变量，那么它只在这个选择器内部生效。
$defaultColor: #fff;
body {
$defaultColor: #ccc;
background：$defaultColor; //编译后#ccc
}
a{
color:$defalutColor;//编译后#fff
}
但是可以通过!global定义全局变量
$defaultColor: #fff;
body {
$defaultColor: #ccc !globa;
background：$defaultColor; //编译后#ccc
}
a{
color:$defalutColor;//编译后#ccc
}
2.函数
在sass中，通过@function定义函数，通过@return返回值，不返回样式。
(1)内置函数
官网函数列表
(2)自定义函数
创建一个px转rem得函数
@function pxToRem($px){ //$px为需要转换的字号
@return $px / 100px * 1rem; //100px为根字体大小
}
a{
font-size:pxToRem(16px);
height:pxTorem(20px)
}
编译后
a{
font-size:0.16rem;
height:0.2rem;
}
3.语法技巧
(1) 多层嵌套
body{
color: black;
div {
color: red;
span{
display:block;
}
}
}
编译后
body{
color:black;
}
body div{
color:red;
}
body div span{
display:block;
}
(2) 属性嵌套
a{
font: {
size: 12px;
weight: bold;
}
}
编译后
a{
font-size:12px;
font-weight:bold;
}
(3) &符号的使用
在Sass中，&表示父元素。
button {
&:hover { color: red; }
}
.main {
&-header { color: bule; }
}
编译后
button:hover{
color:red;
}
.main-header{
color:blue;
}
4.运算
Sass支持数字的加减乘除、取余运算 (+, -, *, /, %), 关系运算<, >, <=, >=以及相等运算==, !=。
a{
font-size:(12px/16px);
height:10px + 20px;
}
编译后
a{
font-size:0.75px;
height:30px;
}
注意：由于原生css语法中就有使用/的地方，所以在sass只有以下情况视为除法运算
- 值被圆括号包括
( 10px / 20px) - 属于算数表达式的一部分
(10px + 20px/40px) - 如果有一个值是变量或函数
$hight/10 -
sass中+也可以做字符串拼接
