数字运算符

• <expression> + <expression> 将第一个 表达 的值添加到第二个 表达 的值中。

  ¥<expression> + <expression> adds the first expression’s value to the second’s.

• <expression> - <expression> 从第二个 表达 的值中减去第一个 表达 的值。

  ¥<expression> - <expression> subtracts the first expression’s value from the second’s.

• <expression> * <expression> 将第一个 表达 的值乘以第二个 表达 的值。

  ¥<expression> * <expression> multiplies the first expression’s value by the second’s.

• <expression> % <expression> 返回第一个 表达 值除以第二个值的余数。这被称为 模运算符。

  ¥<expression> % <expression> returns the remainder of the first expression’s value divided by the second’s. This is known as the modulo operator.

• SCSS
• Sass

Playground

SCSS Syntax

@debug 10s + 15s; // 25s
@debug 1in - 10px; // 0.8958333333in
@debug 5px * 3px; // 15px*px
@debug 1in % 9px; // 0.0625in

Playground

Sass Syntax

@debug 10s + 15s  // 25s
@debug 1in - 10px  // 0.8958333333in
@debug 5px * 3px  // 15px*px
@debug 1in % 9px  // 0.0625in

无单位数字可以与任何单位的数字一起使用。

¥Unitless numbers can be used with numbers of any unit.

• SCSS
• Sass

Playground

SCSS Syntax

@debug 100px + 50; // 150px
@debug 4s * 10; // 40s

Playground

Sass Syntax

@debug 100px + 50  // 150px
@debug 4s * 10  // 40s

单位不兼容的数字不能与加法、减法或模数一起使用。

¥Numbers with incompatible units can’t be used with addition, subtraction, or modulo.

• SCSS
• Sass

Playground

SCSS Syntax

@debug 100px + 10s;
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.

Playground

Sass Syntax

@debug 100px + 10s
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.

一元运算符一元运算符 permalink

¥Unary Operators

你还可以将 + 和 - 写为一元运算符，它们仅采用一个值：

¥You can also write + and - as unary operators, which take only one value:

• +<expression> 返回表达式的值而不更改它。

  ¥+<expression> returns the expression’s value without changing it.

• -<expression> 返回表达式值的负版本。

  ¥-<expression> returns the negative version of the expression’s value.

• SCSS
• Sass

Playground

SCSS Syntax

@debug +(5s + 7s); // 12s
@debug -(50px + 30px); // -80px
@debug -(10px - 15px); // 5px

Playground

Sass Syntax

@debug +(5s + 7s)  // 12s
@debug -(50px + 30px)  // -80px
@debug -(10px - 15px)  // 5px

⚠️ Heads up!

由于 - 既可以指减法，也可以指一元否定，因此在空格分隔的列表中可能会混淆哪个是哪个。为了安全起见：

¥Because - can refer to both subtraction and unary negation, it can be confusing which is which in a space-separated list. To be safe:

• 减法时始终在 - 两边写空格。

  ¥Always write spaces on both sides of - when subtracting.

• 对于负数或一元负数，请在 - 之前写入空格，但不要在 - 之后写入空格。

  ¥Write a space before - but not after for a negative number or a unary negation.

• 如果一元否定位于空格分隔的列表中，则将其括在括号中。

  ¥Wrap unary negation in parentheses if it’s in a space-separated list.

Sass 中 - 的不同含义按以下顺序优先：

¥The different meanings of - in Sass take precedence in the following order:

1. - 作为标识符的一部分。唯一的例外是单位；Sass 通常允许使用任何有效的标识符作为标识符，但单位不能包含连字符后跟数字。

   ¥- as part of an identifier. The only exception are units; Sass normally allows any valid identifier to be used as an identifier, but units may not contain a hyphen followed by a digit.

2. - 位于表达式和不带空格的字面量数字之间，被解析为减法。

   ¥- between an expression and a literal number with no whitespace, which is parsed as subtraction.

3. - 位于字面量数字的开头，该数字被解析为负数。

   ¥- at the beginning of a literal number, which is parsed as a negative number.

4. 两个数字之间的 - 无论空格如何，都会被解析为减法。

   ¥- between two numbers regardless of whitespace, which is parsed as subtraction.

5. - 在除字面量数字以外的值之前，该值被解析为一元否定。

   ¥- before a value other than a literal number, which is parsed as unary negation.

• SCSS
• Sass

Playground

SCSS Syntax

@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

Playground

Sass Syntax

@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

分配分配 permalink

¥Division

兼容性 (math.div()):

Dart Sass

since 1.33.0

LibSass

✗

Ruby Sass

✗

与其他数学运算不同，Sass 中的除法是通过 math.div() 函数完成的。尽管许多编程语言使用 / 作为除法运算符，但在 CSS 中，/ 用作分隔符（如 font: 15px/32px 或 hsl(120 100% 50% / 0.8)）。虽然 Sass 确实支持使用 / 作为除法运算符，但这已被弃用，并且在未来版本中支持 将被删除。

¥Unlike other mathematical operations, division in Sass is done with the math.div() function. Although many programming languages use / as a division operator, in CSS / is used as a separator (as in font: 15px/32px or hsl(120 100% 50% / 0.8)). While Sass does support the use of / as a division operator, this is deprecated and will be removed in a future version.

斜杠分隔值斜杠分隔值 permalink

¥Slash-Separated Values

目前，虽然 Sass 仍然支持 / 作为除法运算符，但它必须有一种方法来消除作为分隔符的 / 和作为除法的 / 之间的歧义。为了使这项工作有效，如果两个数字由 / 分隔，Sass 会将结果打印为斜杠分隔而不是除法，除非满足以下条件之一：

¥For the time being while Sass still supports / as a division operator, it has to have a way to disambiguate between / as a separator and / as division. In order to make this work, if two numbers are separated by /, Sass will print the result as slash-separated instead of divided unless one of these conditions is met:

• 任一表达式都不是字面量数字。

  ¥Either expression is anything other than a literal number.

• 结果存储在变量中或由函数返回。

  ¥The result is stored in a variable or returned by a function.

• 该运算由括号括起来，除非这些括号位于包含该运算的列表之外。

  ¥The operation is surrounded by parentheses, unless those parentheses are outside a list that contains the operation.

• 结果用作另一个操作的一部分（/ 除外）。

  ¥The result is used as part of another operation (other than /).

• 结果由 计算 返回。

  ¥The result is returned by a calculation.

你可以使用 list.slash() 强制使用 / 作为分隔符。

¥You can use list.slash() to force / to be used as a separator.

• SCSS
• Sass

Playground

SCSS Syntax

@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

Playground

Sass Syntax

@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

UnitsUnits permalink

Sass has powerful support for manipulating units based on how real-world unit calculations work. When two numbers are multiplied, their units are multiplied as well. When one number is divided by another, the result takes its numerator units from the first number and its denominator units from the second. A number can have any number of units in the numerator and/or denominator.

• SCSS
• Sass

Playground

SCSS Syntax

@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

Playground

Sass Syntax

@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

Sass will automatically convert between compatible units, although which unit it will choose for the result depends on which implementation of Sass you’re using. If you try to combine incompatible units, like 1in + 1em, Sass will throw an error.

• SCSS
• Sass

Playground

SCSS Syntax

// CSS defines one inch as 96 pixels.
@debug 1in + 6px; // 102px or 1.0625in

@debug 1in + 1s;
//     ^^^^^^^^
// Error: Incompatible units s and in.

Playground

Sass Syntax

// CSS defines one inch as 96 pixels.
@debug 1in + 6px  // 102px or 1.0625in

@debug 1in + 1s
//     ^^^^^^^^
// Error: Incompatible units s and in.

As in real-world unit calculations, if the numerator contains units that are compatible with units in the denominator (like math.div(96px, 1in)), they’ll cancel out. This makes it easy to define a ratio that you can use for converting between units. In the example below, we set the desired speed to one second per 50 pixels, and then multiply that by the number of pixels the transition covers to get the time it should take.

• SCSS
• Sass
• CSS

Playground

SCSS Syntax

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

Playground

Sass Syntax

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

CSS Output

.slider {
  position: absolute;
  left: 10px;
  transition: left 2.2s;
}
.slider:hover {
  left: 120px;
}