html里面能计算除法吗,1.4[Sass运算]除法

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

}

~~~