#### 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; } ~~~