数值运算符
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 中不同含义的
-
优先顺序如下：
-
-，作为标识符的一部分。唯一的例外是单位；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
斜杠
与其他数学运算不同，Sass 中的除法是通过
/
用作除法运算符，但在 CSS 中，
/
用作分隔符（如font: 15px/32px or 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 个像素一秒，然后将其乘以过渡覆盖的像素数以获得它应该花费的时间。
| scss 语句 | css 语句 |
|---|---|
$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);
}
|
.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%的方式。