SASS |数字运算符 - 芒果文档

Sass 支持标准的数学数字运算符。它们可以在兼容单位之间自动转换，例如分钟可以与秒相加，它们会自动转换。

数字运算符：

+ 运算符将两个值或表达式相加，或者我们可以说将第一个值与第二个值相加。
– 运算符从第二个值中减去第一个值。这是需要记住的。
* 运算符将两个值相乘。
/ 运算符将第一个值除以第二个值。
% 运算符返回第一个值除以第二个值的余数。它也被称为模运算符。

例子：

```
@debug 20px + 10px
```
输出： 30px
```
@debug 5s - 20s
```
输出： 15s
```
@debug 10px * 2px
```
OUTPUT: 20px*px（你将在本文后面了解px*px ）
```
@debug 10px / 2px
```
输出： 5px
```
@debug 2in / 5px
```
输出： 0.0208（1in == 96px）

无单位数可与任何单位数一起使用。

例子：

```
@debug 20px + 7
```
输出： 27px
```
@debug 4s * 10
```
输出： 40s

具有不同或您可以说不兼容单位的数字不能相加、相减或用于模运算符。

例子：

```
@debug 10s - 5px
```
输出：错误：单位 s 和 px 不兼容

一元运算符：

您还可以使用+ 和 –作为需要简单表达式的一元运算运算符。

+ 返回值而不更改它。
– 返回值，因为它是负版本。

例子：

```
@debug +(5s + 4s)
```
输出： 9s
```
@debug -(6s + 3s)
```
输出： -9s
```
@debug -(3s - 4s)
```
输出： -1s

单位：

Sass 具有根据单元在日常生活（现实生活）中的用途来操纵这些单元的强大能力。这意味着当两个数字相乘时，它们的单位与值相乘，除法的情况也是如此。您将通过以下示例了解更多信息：

```
@debug 4px * 6px
```
输出： 24px*px
```
@debug 10px/2s
```
输出： 5px/s
```
@debug 10px * 4s * 2em / 2deg
```
输出： 40 px*s*em/deg

$pixels-per-second : 10px/s
@debug $pixels-per-second

输出： 10px/s

```
@debug 1/$pixels-per-second
```
输出： 0.1s/px

就像这样，如果单位兼容且分工，就会被取消：
```
@debug 1in / 96px
```
输出： 1

实际实施：

上述运算符可用于使 CSS 工作轻松快速。

例子：

您不需要提供显示速度。对于每个组件，您创建一个 Sass，为您提供所需的每个组件的 CSS。

萨斯代码：

$speed: 1s/50px;
  
@mixin show($start, $stop) {
  left: $start;
  transition: left ($stop - $start) * $speed;
  
  &:hover {
    left: $stop;
  }
}
  
.navbar {
  @include show(5px, 10px);
}
  
.button {
  @include show(2px, 5px);
}

这将自动为您提供以下 CSS 代码：

.navbar {
  left: 5px;
  transition: left 0.1s;
}
.navbar:hover {
  left: 10px;
}

.button {
  left: 2px;
  transition: left 0.06s;
}
.button:hover {
  left: 5px;
}