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