计算（Calculations）

计算是 Sass 表示 calc() 函数的方式，以及类似的函数，如 clamp() 、 min() 和 max() 。Sass 将尽可能简化这些，即使它们相互结合。

@debug calc(400px + 10%); // calc(400px + 10%)
@debug calc(400px / 2); // 200px
@debug min(100px, calc(1rem + 10%)); // min(100px, 1rem + 10%)

计算使用不同于普通 SassScript 的特殊语法。它的语法与 CSS 相同，但具有使用 Sass 变量和调用 Sass 函数 calc() 的额外能力。这意味着在计算中始终是除法运算符！/

Sass 函数调用的参数使用普通的 Sass 语法，而不是特殊的计算语法！

您还可以在计算中使用插值。但是，如果您这样做，则围绕该插值的括号中的任何内容都不会被简化或类型检查，因此很容易以额外冗长甚至无效的 CSS 告终。与其写 calc(10px +#{$var}) ，不如写 calc(10px +$var)

简化

如果 Sass 使用可以在编译时组合的单位（例如 1in + 10px 或者 5s * 2 ），则 Sass 将简化计算中的相邻操作。如果可能的话，它甚至会将整个计算简化为一个数字——例如， clamp(0px, 30px, 20px) 将返回 20px。

⚠️注意！
这意味着计算表达式不一定总是返回计算！如果您正在编写 Sass 库，则始终可以使用该 meta.type-of() 函数来确定您正在处理的类型。

计算也将在其他计算中得到简化。特别是，如果 calc() 在任何其他计算中结束，函数调用将被删除，并将被一个普通的旧操作替换。

$width: calc(400px + 10%);

.sidebar {
  width: $width;
  padding-left: calc($width / 4);
}

.sidebar {
  width: calc(400px + 10%);
  padding-left: calc($width / 4);
}

操作符

您不能将计算与正常的 SassScript 操作（如 + 和 * ）一起使用。如果你想编写一些允许计算的数学函数，只需将它们写在它们自己的 calc() 表达式中，如果它们传递了一堆具有兼容单位的数字，它们也会返回纯数字，如果它们被传递了计算，它们会返回计算。

这个限制是为了确保如果不需要计算，他们会尽快抛出错误。计算不能在任何地方使用普通数字：例如，它们不能被注入 CSS 标识符（例如 item-#{$n} ），并且不能传递给 Sass 的内置数学函数。将 SassScript 操作保留为普通数字可以明确哪些计算是允许的，哪些不允许。

$width: calc(100% + 10px);
@debug $width * 2; // Error!
@debug calc($width * 2); // calc((100% + 10px) * 2);

min()和 max()

CSS添加了对 Values and Units Level 4 的支持 min() 和 max() 函数，从那里它们被 Safari 迅速采用以支持 iPhoneX。但是 Sass 早在此之前就支持它自己的 min() 和 max() 函数，并且它需要向后兼容所有现有的样式表。这导致需要额外的特殊句法聪明才智。

如果 min() 和 max() 函数调用是一个有效的计算表达式，它将被解析为一个计算。但只要调用的任何部分，包含 SassScript 不支持的计算功能，例如模运算符，它就会被解析为对 Sass 核心 min() 和 max() 函数的调用。

由于无论如何都尽可能将计算简化为数字，唯一的实质性区别是 Sass 函数仅支持可以在构建时组合的单元，因此 min(12px % 10, 10%) 会引发错误。

⚠️注意！
其他计算不允许，将无单位的数字与有单位的数字，进行加法、减法等运算。不过， min() 和 max() 不同：为了与全局 Sass min() 和 max() 函数向后兼容，由于历史原因，全局 Sass min() 和 max() 函数允许单位/无单位混合，只要这些单位直接包含在 min() 和 max() 计算中，就可以混合。

$padding: 12px;

.post {
  // Since these max() calls are valid calculation expressions, they're parsed as calculations.
  padding-left: max($padding, env(safe-area-inset-left));
  padding-right: max($padding, env(safe-area-inset-right));
}

.sidebar {
  // Since these use the SassScript-only modulo operator, they're parsed as SassScript function calls.
  padding-left: max($padding % 10, 20px);
  padding-right: max($padding % 10, 20px);
}

.content {
  font-family: Tahoma, Geneva, Arial, sans-serif;
}