#### 1.1[Sass运算]加法 注意:加法运算是 Sass 中运算中的一种,在**变量**或**属性**中都可以做加法运算 a、**属性值加法计算都带单位** **注意**:当em,rem等相对当前字体的单位,于px在一起不能运算,会报错,只有绝对字体单位与px一起运算不会报错,如in。建议属性值加法运算单位相同,。 列1:sass样式 注:1in=96px; ~~~ .box{ width: 20px + 8in; } ~~~ 转化成css ~~~ .box { width: 788px; } ~~~ b、**属性值加法计算其中一个带单位** **注意:**如果其中一个不带单位,那么会以另一个带单位的为准, 列:sass样式 ~~~ .box{ width: 20px + 8; } ~~~ 转化成css ~~~ .box { width: 28px; } ~~~ **c、变量加法运算** **注意:**+加号的作用变量,不需要用空格隔开 列:sass样式 ~~~ $container: 960px; $sidebar-width: 220px; $gap-width: 20px; .content{ width: $container+ $sidebar-width+$gap-width; } ~~~ 转化成css样式 ~~~ .content { width: 1200px; } ~~~ **d、变量加值运算** **注意:**变量加值运算就是一个是变量名,一个是进行加法运算。 列:sass样式 ~~~ $container: 960px; .content1{ width: $container+20px; } ~~~ 转化成css ~~~ .content1 { width: 980px; } ~~~ **e、混合宏的中加法运算** 列:sass样式 ~~~ @mixin box3($width:90px,$height:80px){ width:$width; height:$height; padding:$height+20px; } .demo9{ @include box3 } ~~~ 转化成css样式 ~~~ .demo9 { width: 90px; height: 80px; padding: 100px; } ~~~