sass进阶—变量运算

/*变量操作 (两个变量之间的运算符需要用空格隔开，否则会报错。)
==，!=
<，>，<=，>=
+，-，*，/，%

*/

$width1:50px;
$width2:100px;
body{
width: $width1 + $width2;
height: $width2 - $width1;
}

/*连字符号中间使用带空格的加号效果不变*/
a:hover{
cursor:e-resize;
/*等同于*/
cursor: e + -resize;
}

注意：说明运算时sass只关注运算符前后两个用空格隔开的值，其余的都不管原样输出

层级关系：双引号权重最大，没有引号其次，单引号的权重最低，有双引号则结果有双引号，单双都有结果为双，只有单引号则结果没有引号
a:before{
content: "a" + bc;
/* content:"abc" */
}

a:before{
content: a + 'bc';
/* content:abc */
}

a:before{
content: 'a' + "bc";
/* content:"abc" */
}

字符串引用变量时不能使用变量名直接引用，需要加上#好号和大括号才能引用成功，否则将原样输出

$version:1.6;
p:before{
content: 'hello,sass #{$version}';
}
$height1:10px;
$height2:20px;

span{
font-size: 10px / 5px; //不会加以运算
width: $width2 / 2;
等同于
width: round($width2) / 2;
等同于
width: (100px / 2);
}

注：运算规则：
1、运算符前后需要使用空格隔开；
2、两个变量若是单位不一致则无法进行计算。
3、一个带单位一个不带单位则以带单位的单位为结果单位。
4、除法计算时必须要求被除数带单位，除数不带单位