数字运算符

Sass 支持数字的标准数学运算符集。它们会在兼容的单位之间自动转换。

<expression> + <expression> 将第一个表达式的值加到第二个表达式的值上。
<expression> - <expression> 从第二个表达式的值中减去第一个表达式的值。
<expression> * <expression> 将第一个表达式的值乘以第二个表达式的值。
<expression> % <expression> 返回第一个表达式的值除以第二个表达式的值的余数。这被称为模运算符。

  SCSS

  Sass

       游乐场SCSS 语法@debug 10s + 15s; // 25s
@debug 1in - 10px; // 0.8958333333in
@debug 5px * 3px; // 15px*px
@debug 1in % 9px; // 0.0625in

       游乐场Sass 语法@debug 10s + 15s  // 25s
@debug 1in - 10px  // 0.8958333333in
@debug 5px * 3px  // 15px*px
@debug 1in % 9px  // 0.0625in

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

  SCSS

  Sass

       游乐场SCSS 语法@debug 100px + 50; // 150px
@debug 4s * 10; // 40s

       游乐场Sass 语法@debug 100px + 50  // 150px
@debug 4s * 10  // 40s

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

  SCSS

  Sass

       游乐场SCSS 语法@debug 100px + 10s;
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.

       游乐场Sass 语法@debug 100px + 10s
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.

一元运算符一元运算符永久链接

您还可以将 + 和 - 编写为一元运算符，它们只取一个值

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

  SCSS

  Sass

       游乐场SCSS 语法@debug +(5s + 7s); // 12s
@debug -(50px + 30px); // -80px
@debug -(10px - 15px); // 5px

       游乐场Sass 语法@debug +(5s + 7s)  // 12s
@debug -(50px + 30px)  // -80px
@debug -(10px - 15px)  // 5px

⚠️ 注意！

因为 - 可以指减法和一元否定，所以在空格分隔的列表中区分哪一个是哪一个是比较混乱的。为了安全起见

在减法时始终在 - 的两侧写空格。
对于负数或一元否定，在 - 前面写一个空格，后面不要写空格。
如果一元否定在空格分隔的列表中，请将其括在括号中。

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

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

SCSS

Sass

     游乐场SCSS 语法@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

     游乐场Sass 语法@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

除法除法永久链接

Dart Sass: 自 1.33.0 起
LibSass: ✗
Ruby Sass: ✗

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

斜杠分隔的值斜杠分隔的值永久链接

在 Sass 仍然支持 / 作为除法运算符的这段时间内，它必须有一种方法来区分 / 作为分隔符和 / 作为除法。为了使这能够工作，如果两个数字由 / 分隔，Sass 将打印结果为斜杠分隔而不是除法，除非满足以下条件之一

任一表达式都不是文字数字。
结果存储在变量中或由函数返回。
操作周围有括号，除非这些括号在包含操作的列表之外。
结果用作另一个操作（除 / 外）的一部分。
结果由计算返回。

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

  SCSS

  Sass

       游乐场SCSS 语法@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 语法@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 对基于现实世界单位计算的方式操作单位具有强大的支持。当两个数字相乘时，它们的单位也会相乘。当一个数字除以另一个数字时，结果从第一个数字获取其分子单位，从第二个数字获取其分母单位。一个数字可以在分子和/或分母中具有任意数量的单位。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:math';

@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

       游乐场Sass 语法@use 'sass:math'

@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 将抛出错误。

  SCSS

  Sass

       游乐场SCSS 语法// CSS defines one inch as 96 pixels.
@debug 1in + 6px; // 102px or 1.0625in

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

       游乐场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 像素一秒，然后将其乘以过渡覆盖的像素数以获得它应该花费的时间。

  SCSS

  Sass

  CSS

       游乐场SCSS 语法@use 'sass:math';

$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 语法@use 'sass:math'

$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)

CSS 输出.slider {
  position: absolute;
  left: 10px;
  transition: left 2.2s;
}
.slider:hover {
  left: 120px;
}

⚠️ 注意！

如果您的算术运算给您错误的单位，您可能需要检查您的数学运算。您可能遗漏了应该具有单位的数量的单位！保持单位整洁可以让 Sass 在出现错误时为您提供有用的错误信息。

您应该尤其避免使用像 #{$number}px 这样的插值。这实际上并没有创建数字！它创建了一个看起来像数字的未加引号的字符串，但不能与任何数字运算或函数一起使用。尝试使您的数学运算单位整洁，以便 $number 已经具有单位 px，或者编写 $number * 1px。

⚠️ 注意！

Sass 中的百分比与其他每个单位一样。它们不能与小数互换，因为在 CSS 中，小数和百分比表示不同的含义。例如，50% 是一个以 % 作为单位的数字，Sass 认为它与数字 0.5 不同。

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