Lzh on GitHub

Numeric

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

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

  • <expression> + <expression> 将第一个表达式的值加上第二个表达式的值。
  • <expression> - <expression> 将第一个表达式的值减去第二个表达式的值。
  • <expression> * <expression> 将第一个表达式的值乘以第二个表达式的值。
  • <expression> % <expression> 返回第一个表达式的值除以第二个表达式的余数。这被称为模运算符。
@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

除法

与其他数学运算不同，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 对单位的操作有强大的支持，其方式类似于现实世界的单位计算。当两个数字相乘时，它们的单位也相乘。当一个数字被另一个数字除时，结果的分子单位来自第一个数字，分母单位来自第二个。一个数字可以在分子和/或分母中拥有任意数量的单位。

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

// 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 像素一秒，然后将该值乘以过渡覆盖的像素数，以获得所需的时间。

@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 在出现问题时为你提供有用的错误。你应该特别避免使用像 #{number}px 这样的插值。这实际上并没有创建一个数字！它创建了一个不带引号的字符串，看起来像一个数字，但不能与任何数字运算或函数一起使用。尝试使你的数学单位清晰，以便 $number 已经具有 px 单位，或者编写 $number * 1px。
Sass 中的百分比就像其他所有单位一样工作。它们与小数不可互换，因为在 CSS 中，小数和百分比的含义不同。例如，50% 是一个以 % 为单位的数字，Sass 认为它与数字 0.5 不同。你可以使用单位算术在小数和百分比之间进行转换。math.div($percentage, 100%) 将返回相应的小数，而 $decimal * 100% 将返回相应的百分比。你也可以使用 math.percentage() 函数作为 $decimal * 100% 的更明确的写法。