### Sass基本运算 数字运算 ```javascript 一、Sass加法-减法 width:(100px + 20px); // width:120px; width:(100px + 20em); // Incompatible units: 'em' and 'px' width: ($sidebar-width + $content-width + $gap-width) 减号“-”前后一定要有空格 width: ($container-width-$sidebar-width); 无法正确地识别哪个“-”是变量的一部分，哪个“-”是减号 三、Sass乘法 width:(100px * 2); // width:200px; width:(100px * 2px); // 两个都带单位,报错，200px*px @for $i from 1 through 3{ .item-#{$i} { width:10px * $i; } } 编译出来 .item-1{ width: 10px; } .item-2{ width: 20px; } .item-3{ width: 30px; } -------------------------------------------------------- 四、Sass除法 font:20px/10px; //纯CSS，不是除法运算 width:(20px/10px); //使用了小括号，是除法运算，符合第1点 height:$height/2; //使用了变量，是除法运算，符合第3点 line-height:round(1.5)/2; //使用了函数，是除法运算，符合第3点 margin-left:10px + 10px/2px; //使用了加号，是除法运算，符合第2点 ``` 字符运算 ```javascript content: "fzx " + cookie; // content: "fzx cookie"; 左边字符串是没有引号的，右边字符串是有引号的，结果是一个没有引号的字符串 ``` 颜色运算 ```javascript color: (#010203 + #040506); // color: #050709; color: (#010203 * 2); // color: #020406; color:(rgb(17,34,51) *2); // color: #224466; rgb(17,34,51转化为十六进制颜色值为“#112233”，然后进行乘法运算 ```