📜  SASS |数字运算符

📅  最后修改于: 2021-11-03 10:32:53             🧑  作者: Mango

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