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