数值运算符 Numeric Operators

• <expression> + <expression> 将第一个 expression 的值添加到第二个的值。
• <expression> - <expression> 从第二个值中减去第一个 expression 的值。
• <expression> * <expression> 将第一个 expression 的值乘以第二个的值。
• <expression> % <expression> 返回第一个 expression 的值除以第二个的余数。 这称为 modulo 运算符。

@debug 10s + 15s; // 25s
@debug 1in - 10px; // 0.8958333333in
@debug 5px * 3px; // 15px*px
@debug 1in % 9px; // 0.0625in

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

@debug 100px + 50; // 150px
@debug 4s * 10; // 40s

单位不兼容的数字不能与加法、减法或模数一起使用。

@debug 100px + 10s;
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.

一元运算符

您还可以将 + 和 - 写成一元运算符，它们只接受一个值：

• +<expression> 返回表达式的值而不改变它。
• -<expression> 返回表达式值的负数版本。

@debug +(5s + 7s); // 12s
@debug -(50px + 30px); // -80px
@debug -(10px - 15px); // 5px

⚠️ 注意！

因为 - 可以指代减法和一元否定，所以在空格分隔的列表中可能会混淆哪个是哪个。 为了安全起见：

• 做减法时总是在 - 两边写上空格。
• 在 - 之前写一个空格，但在负数或一元否定之后不写。
• 如果在以空格分隔的列表中，请将一元否定括在括号中。

Sass 中 - 的不同含义按以下顺序优先：

1. - 作为标识符的一部分。 唯一的例外是单位； Sass 通常允许使用任何有效的标识符作为标识符，但单位不能包含连字符后跟数字。
2. 表达式和数字之间没有空格的 -，被解析为减法。
3. - 位于文字数字的开头，被解析为负数。
4. 两个数字之间的 - 不考虑空格，这被解析为减法。
5. - 在不是文字数字的值之前，它被解析为一元否定。

@debug a-1; // a-1
@debug 5px-3px; // 2px
@debug 5-3; // 2
@debug 1 -2 3; // 1 -2 3

$number: 2;
@debug 1 -$number 3; // -1 3
@debug 1 (-$number) 3; // 1 -2 3

分配

兼容性 (math.div()): Dart Sass since 1.33.0 | LibSass ✗ | Ruby Sass ✗

与其他数学运算不同，Sass 中的除法是使用 math.div() 函数完成的。 尽管许多编程语言使用“/”作为除法运算符，但在 CSS 中，“/”用作分隔符(如“font: 15px/32px”或“hsl(120 100% 50% / 0.8)”)。 虽然 Sass 确实支持使用 / 作为除法运算符，但在未来的版本中已弃用并将被删除。

斜线分隔值

目前，虽然 Sass 仍然支持将 / 作为除法运算符，但它必须有一种方法来区分作为分隔符的 / 和作为除法的 / 之间的歧义。 为了使这项工作正常进行，如果两个数字用 / 分隔，Sass 将以斜线分隔而不是除法打印结果，除非满足以下条件之一：

• 任一表达式都不是文字数字。
• 结果存储在变量中或由函数返回。
• 操作被括号括起来，除非这些括号位于包含操作的列表之外。
• 结果用作另一个操作的一部分(/ 除外)。

您可以使用 [list.slash()] 强制将 / 用作分隔符。

@use "sass:list";

@debug 15px / 30px; // 15px/30px
@debug (10px + 5px) / 30px; // 0.5
@debug list.slash(10px + 5px, 30px); // 15px/30px

$result: 15px / 30px;
@debug $result; // 0.5

@function fifteen-divided-by-thirty() {
  @return 15px / 30px;
}
@debug fifteen-divided-by-thirty(); // 0.5

@debug (15px/30px); // 0.5
@debug (bold 15px/30px sans-serif); // bold 15px/30px sans-serif
@debug 15px/30px + 1; // 1.5

单位

Sass 对根据真实世界的单位计算 的工作原理来操纵单位提供强大的支持。 当两个数字相乘时，它们的单位也会相乘。 当一个数字除以另一个数字时，结果采用第一个数字的分子单位和第二个数字的分母单位。 一个数字在分子和/或分母中可以有任意数量的单位。

@debug 4px * 6px; // 24px*px (read "square pixels")
@debug math.div(5px, 2s); // 2.5px/s (read "pixels per second")

// 3.125px*deg/s*em (read "pixel-degrees per second-em")
@debug 5px * math.div(math.div(30deg, 2s), 24em);

$degrees-per-second: math.div(20deg, 1s);
@debug $degrees-per-second; // 20deg/s
@debug math.div(1, $degrees-per-second); // 0.05s/deg

⚠️ 注意！

因为 CSS 不支持像方形像素这样的复杂单位，所以使用具有复杂单位的数字作为 属性值 会产生错误。 不过，这是伪装的功能； 如果你最终没有得到正确的单位，这通常意味着你的计算有问题！ 请记住，您始终可以使用 @debug 规则 检查任何变量或 表达式.

Sass 会自动在兼容的单位之间进行转换，尽管它会为结果选择哪个单位取决于您使用的 Sass 的实现。如果您尝试组合不兼容的单位，例如 1in + 1em，Sass 会抛出错误。

// CSS defines one inch as 96 pixels.
@debug 1in + 6px; // 102px or 1.0625in

@debug 1in + 1s;
//     ^^^^^^^^
// Error: Incompatible units s and in.

与现实世界中的单位计算一样，如果分子包含与分母中的单位兼容的单位(如 math.div(96px, 1in))，它们将相互抵消。 这样可以轻松定义可用于在单位之间进行转换的比率。 在下面的示例中，我们将所需速度设置为每 50 个像素一秒，然后将其乘以过渡覆盖的像素数以获得它应该花费的时间。

$transition-speed: math.div(1s, 50px);

@mixin move($left-start, $left-stop) {
  position: absolute;
  left: $left-start;
  transition: left ($left-stop - $left-start) * $transition-speed;

  &:hover {
    left: $left-stop;
  }
}

.slider {
  @include move(10px, 120px);
}

⚠️ 注意！

如果你的算术给你错误的单位，你可能需要检查你的数学。 您可能会为了应该拥有它们的数量而放弃单位！ 保持单元整洁可以让 Sass 在出现问题时给出有用的错误提示。

你应该特别避免使用像 #{$number}px 这样的插值。 这实际上并没有创建一个数字！ 它创建了一个未加引号的字符串_看起来_像一个数字，但不能与任何数字操作或函数一起使用 (/modules/math)。 尝试让你的数学单位干净，这样 $number 已经有单位 px，或者写 $number * 1px。

⚠️ 注意！

Sass 中的百分比就像所有其他单位一样工作。 它们_不能_与小数互换，因为在 CSS 中小数和百分比表示不同的东西。 例如，“50%”是以“%”为单位的数字，Sass 认为它不同于数字“0.5”。

您可以使用单位算术在小数和百分比之间进行转换。 math.div($percentage, 100%) 会返回相应的小数，$decimal * 100% 会返回相应的百分比。 您还可以使用 math.percentage() 函数 作为更明确的写法 $decimal * 100%。