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