5-4 [Sass运算]除法

Sass 的乘法运算规则也适用于除法运算。不过除法运算还有一个特殊之处。众所周知“/”符号在 CSS 中已做为一种符号使用。因此在 Sass 中做除法运算时，直接使用“/”符号做为除号时，将不会生效，编译时既得不到我们需要的效果，也不会报错。一起先来看一个简单的示例：

.box {
  width: 100px / 2;  
}

编译出来的 CSS 如下：

.box {
  width: 100px / 2;
}

这样的结果对于大家来说没有任何意义。要修正这个问题，只需要给运算的外面添加一个小括号( )即可：

.box {
  width: (100px / 2);  
}

编译出来的 CSS 如下：

.box {
  width: 50px;
}

除了上面情况带有小括号，“/”符号会当作除法运算符之外，如果“/”符号在已有的数学表达式中时，也会被认作除法符号。如下面示例：

.box {
  width: 100px / 2 + 2in;  
}

编译出来的CSS：

.box {
  width: 242px;
}

另外，在 Sass 除法运算中，当用变量进行除法运算时，“/”符号也会自动被识别成除法，如下例所示：

$width: 1000px;
$nums: 10;

.item {
  width: $width / 10;  
}

.list {
  width: $width / $nums;
}

编译出来的CSS:

.item {
  width: 100px;
}

.list {
  width: 100px;
}

综合上述，”/  ”符号被当作除法运算符时有以下几种情况：

•    如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
•    如果数值被圆括号包围。
•    如果数值是另一个数学表达式的一部分。

如下所示：

//SCSS
p {
  font: 10px/8px;             // 纯 CSS，不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}

编译出来的CSS

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
 }

Sass 的除法运算还有一个情况。我们先回忆一下，在乘法运算时，如果两个值带有相同单位时，做乘法运算时，出来的结果并不是我们需要的结果。但在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。如下所示：

.box {
  width: (1000px / 100px);
}

编译出来的CSS如下：

.box {
  width: 10;
}