#### 1.4[Sass运算]除法 **注意:**Sass的乘法运算规则也适用于除法运算,不过除法运算有特殊之处,因为”/”符号在CSS中已经作为一种符号使用,因此在Sass中直接使用”/”作为除号时,将不会生效,编译时既不会报错,也不会得到我们想要的效果。除号的作用用空格隔开,也不会得到想要的效果。 如: ~~~ .box{ width: 100px / 2; } ~~~ 转化成CSS: ~~~ .box { width: 100px / 2; } ~~~ **要修正这个文字,只需要给运算的外面添加一对小括号()即可**。 ~~~ .box{ width: (100px / 2); } ~~~ 转化成CSS: ~~~ .box { width: 50px; } ~~~ **除了小括号以外,如果除了 “/” 外,还有其它的运算符号,那么也会被当作除号看待。** 列1 sass样式 ~~~ .box { width: 100px / 2 + 20px; } ~~~ 转化成CSS: ~~~ .box { width: 70px; } ~~~ 列2 sass样式 ~~~ .box { width: ((220px + 720px) - 11 * 20 ) / 12 ; } ~~~ 转化成css样式 ~~~ .box { width: 60px; } ~~~ 另外,如果是**用变量进行除法运算,”/”也会自动被识别为除法**。 如: 列1:sass样式 ~~~ $width: 960px; .col { width: $width / 10; } ~~~ 转化成CSS: ~~~ .col { width: 96px; } ~~~ 列2:sass样式 ~~~ $sidebar-width: 220px; $content-width: 720px; $gap-width: 20px; .container { width: $sidebar-width+$content-width/$gap-width; margin: 0 auto; } ~~~ 转化成CSS: ~~~ .container { width: 256px; margin: 0 auto; } ~~~ * * * * * 综合上述,”/ ”符号被当作除法运算符时有以下几种情况: 1. 如果数值被圆括号包围。 2. 如果数值是另一个数学表达式的一部分,即用上加减乘其他运算 3. 有变量进行除法 **注意:**在除法运算时,如果**两个值带有相同的单位值时,除法运算之后会得到一个不带单位的数值**。 如:sass样式 ~~~ .box { width: (1000px / 100px); } ~~~ 转化成css ~~~ .box { width: 10; } ~~~