计算

兼容性:

Dart Sass

since 1.40.0

LibSass

✗

Ruby Sass

✗

➤

兼容性 (Adjacent values):

Dart Sass

since 1.67.0

LibSass

✗

Ruby Sass

✗

➤

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

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

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

¥Calculations use a special syntax that’s different from normal SassScript. It’s the same syntax as the CSS calc(), but with the additional ability to use Sass variables and call Sass functions. This means that / is always a division operator within a calculation!

你还可以在计算中使用 插值法。但是，如果这样做，涉及插值的任何操作都不会被简化或类型检查，因此很容易导致额外的冗长甚至无效的 CSS。与其写 calc(10px + #{$var})，不如写 calc(10px + $var)！

¥You can also use interpolation in a calculation. However, if you do, no operations that involve that interpolation will be simplified or type-checked, so it’s easy to end up with extra verbose or even invalid CSS. Rather than writing calc(10px + #{$var}), just write calc(10px + $var)!

简化简化 permalink

¥Simplification

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

¥Sass will simplify adjacent operations in calculations if they use units that can be combined at compile-time, such as 1in + 10px or 5s * 2. If possible, it’ll even simplify the whole calculation to a single number—for example, clamp(0px, 30px, 20px) will return 20px.

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

¥Calculations will also be simplified within other calculations. In particular, if a calc() end up inside any other calculation, the function call will be removed and it’ll be replaced by a plain old operation.

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

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

$width: calc(400px + 10%)

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

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

运算运算 permalink

¥Operations

你不能使用常规 SassScript 操作（如 + 和 *）进行计算。如果你想编写一些允许计算的数学函数，只需将它们写在它们自己的 calc() 表达式中 - 如果它们 ’重新传递了一堆具有兼容单位的数字，它们也会返回普通数字，如果它们’ 通过计算，它们将返回计算结果。

¥You can’t use calculations with normal SassScript operations like + and *. If you want to write some math functions that allow calculations just write them within their own calc() expressions—if they’re passed a bunch of numbers with compatible units, they’ll return plain numbers as well, and if they’re passed calculations they’ll return calculations.

此限制的目的是确保如果不需要计算，它们会尽快抛出错误。计算不能用于普通数字可以使用的所有地方：例如，它们不能注入 CSS 标识符（例如 .item-#{$n}），也不能传递给 Sass 的内置 数学函数。为纯数字保留 SassScript 操作可以清楚地明确哪些地方允许计算，哪些地方不允许计算。

¥This restriction is in place to make sure that if calculations aren’t wanted, they throw an error as soon as possible. Calculations can’t be used everywhere plain numbers can: they can’t be injected into CSS identifiers (such as .item-#{$n}), for example, and they can’t be passed to Sass’s built-in math functions. Reserving SassScript operations for plain numbers makes it clear exactly where calculations are allowed and where they aren’t.

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

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

常量常量 permalink

¥Constants

兼容性:

Dart Sass

since 1.60.0

LibSass

✗

Ruby Sass

✗

计算还可以包含常量，这些常量被写为 CSS 标识符。为了与未来的 CSS 规范向前兼容，所有标识符都是允许的，并且默认情况下它们只是被视为按原样传递的不带引号的字符串。

¥Calculations can also contain constants, which are written as CSS identifiers. For forwards-compatibility with future CSS specs, all identifiers are allowed, and by default they’re just treated as unquoted strings that are passed-through as-is.

@debug calc(h + 30deg); // calc(h + 30deg);

@debug calc(h + 30deg)  // calc(h + 30deg);

Sass 自动将 CSS 中指定的一些特殊常量名称解析为无单位数字：

¥Sass automatically resolves a few special constant names that are specified in CSS to unitless numbers:

• pi 是 数学常量 π 的简写。

  ¥pi is a shorthand for the mathematical constant π.

• e 是 数学常量 e 的简写。

  ¥e is a shorthand for the mathematical constant e.

• infinity、-infinity、NaN 表示对应的浮点值。

  ¥infinity, -infinity, and NaN represent the corresponding floating-point values.

@use 'sass:math';

@debug calc(pi); // 3.1415926536
@debug calc(e);  // 2.7182818285
@debug calc(infinity) > math.$max-number;  // true
@debug calc(-infinity) < math.$min-number; // true

@use 'sass:math'

@debug calc(pi)  // 3.1415926536
@debug calc(e)   // 2.7182818285
@debug calc(infinity) > math.$max-number   // true
@debug calc(-infinity) < math.$min-number  // true

计算函数计算函数 permalink

¥Calculation Functions

兼容性 (Additional functions):

Dart Sass

since 1.65.0

LibSass

✗

Ruby Sass

✗

➤

Sass 将以下函数解析为 calculations：

¥Sass parses the following functions as calculations:

• 比较功能：min()、max() 和 clamp()

  ¥Comparison Functions: min(), max(), and clamp()

• 阶梯值函数：round()、mod() 和 rem()。

  ¥Stepped Value Functions: round(), mod(), and rem().

• 三角函数：sin()、cos()、tan()、asin()、acos()、atan() 和 atan2()。

  ¥Trigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2().

• 指数函数：pow()、sqrt()、hypot()、log() 和 exp()。

  ¥Exponential Functions: pow(), sqrt(), hypot(), log(), and exp().

• 符号相关函数：abs() 和 sign()。

  ¥Sign-Related Functions: abs() and sign().

旧版全局函数旧版全局函数 permalink

¥Legacy Global Functions

CSS 在值和单位级别 4 中添加了对 数学表达式 的支持。然而，Sass 在此之前很久就支持自己的 round()、abs()、min() 和 max()，并且它需要向后兼容所有现有的样式表。这导致需要额外特殊的语法智慧。

¥CSS added support for mathematical expressions in Values and Units Level 4. However, Sass supported its own round(), abs(), min() and max() long before this, and it needed to be backwards-compatible with all those existing stylesheets. This led to the need for extra-special syntactic cleverness.

如果对 round()、abs()、min() 或 max() 的调用是有效的计算表达式，则它将被解析为计算。但是，一旦调用的任何部分包含计算中不支持的 SassScript 功能（例如 模运算符），它就会被解析为对适当的 Sass 数学函数的调用。

¥If a call to round(), abs(), min(), or max() is a valid calculation expression, it will be parsed as a calculation. But as soon as any part of the call contains a SassScript feature that isn’t supported in a calculation, like the modulo operator, it’s parsed as a call to the appropriate Sass math function instead.

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

¥Since calculations are simplified to numbers when possible anyway, the only substantive difference is that the Sass functions only support units that can be combined at build time, so min(12px % 10, 10%) will throw an error.

min() 和 max()min() 和 max() permalink

¥min() and max()

兼容性 (min and max syntax):

Dart Sass

since >=1.11.0 <1.42.0

LibSass

✗

Ruby Sass

✗

➤

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

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

.post {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

.sidebar {
  padding-left: 20px;
  padding-right: 20px;
}

round()round() permalink

兼容性 (min and max syntax):

Dart Sass

since 1.65.0

LibSass

✗

Ruby Sass

✗

➤

round(<strategy>, number, step) 函数接受可选的舍入策略、要舍入的值和舍入间隔 step。strategy 应该是 nearest、up、down 或 to-zero。

¥The round(<strategy>, number, step) function accepts an optional rounding strategy, a value to be rounded and a rounding interval step. strategy should be nearest, up, down, or to-zero.

$number: 12.5px;
$step: 15px;

.post-image {
  // Since these round() calls are valid calculation expressions, they're
  // parsed as calculations.
  padding-left: round(nearest, $number, $step);
  padding-right: round($number + 10px);
  padding-bottom: round($number + 10px, $step + 10%);
}

$number: 12.5px
$step: 15px

.post-image
  // Since these round() calls are valid calculation expressions, they're
  // parsed as calculations.
  padding-left: round(nearest, $number, $step)
  padding-right: round($number + 10px)
  padding-bottom: round($number + 10px, $step + 10%)

.post-image {
  padding-left: 15px;
  padding-right: 23px;
  padding-bottom: round(22.5px, 15px + 10%);
}

abs()abs() permalink

兼容性 (min and max syntax):

Dart Sass

since 1.67.0

LibSass

✗

Ruby Sass

✗

➤

abs(value) 接受单个表达式作为参数并返回 $value 的绝对值。如果 $value 为负数，则返回 -$value；如果 $value 为正数，则按原样返回 $value。

¥The abs(value) takes in a single expressiona as a parameter and returns the absolute value of $value. If $value is negative, this returns -$value, and if $value is positive, it returns $value as-is.

.post-image {
  // Since these abs() calls are valid calculation expressions, they're
  // parsed as calculations.
  padding-left: abs(10px);
  padding-right: math.abs(-7.5%);
  padding-top: abs(1 + 1px);
}

.post-image
  // Since these abs() calls are valid calculation expressions, they're
  // parsed as calculations.
  padding-left: abs(-10px)
  padding-right: math.abs(-7.5%)
  padding-top: abs(1 + 1px)

.post-image {
  padding-left: 10px;
  padding-right: 7.5%;
  padding-top: 2px;
}