数值运算符

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

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

@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.

一元运算符

你也可以将+和-，写成一元运算符，它只取一个值：

• +，返回表达式的值而不更改它。
• -，返回表达式值的负数。

@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 中的除法是通过math.div()函数完成的。尽管许多编程语言中，/用作除法运算符，但在 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

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

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

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com