数值运算符

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

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

  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

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

  SCSS

  Sass

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

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

具有不兼容单位的数字不能用于加法、减法或模运算。

  SCSS

  Sass

      
      Playground
    SCSS Syntax@debug 100px + 10s;
//     ^^^^^^^^^^^
// 错误：不兼容的单位 px 和 s。

      
      Playground
    Sass Syntax@debug 100px + 10s
//     ^^^^^^^^^^^
// 错误：不兼容的单位 px 和 s。

一元运算符一元运算符 permalink

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

+<表达式> 返回表达式的值，不做改变。
-<表达式> 返回表达式值的负值。

  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!

因为 - 可以指减法和一元取反，所以在空格分隔的列表中可能会混淆哪个是哪个。为了安全起见：

在减法时，在 - 的两侧都写空格。
对于负数或一元取反，在 - 前写空格，但不要在后面写。
如果在空格分隔的列表中，用括号包裹一元取反。

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

作为标识符的一部分的 -。唯一的例外是单位；Sass 通常允许使用任何有效的标识符，但单位不得包含后跟数字的连字符。
表达式和字面数字之间没有空白的 -，被解析为减法。
字面数字开头的 -，被解析为负数。
无论空白与否，两个数字之间的 -，被解析为减法。
非字面数字值前的 -，被解析为一元取反。

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

Dart Sass: since 1.33.0
LibSass: ✗
Ruby Sass: ✗

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

斜线分隔的值斜线分隔的值 permalink

在 Sass 仍然支持 / 作为除法运算符的同时，它必须有一种方法来消除 / 作为分隔符和 / 作为除法之间的歧义。为了使其工作，如果两个数字用 / 分隔，Sass 将打印结果为斜线分隔，除非满足以下条件之一：

任一表达式不是字面数字。
结果存储在变量中或由函数返回。
操作被括号包围，除非这些括号在包含操作的列表之外。
结果作为另一个操作（除 / 之外）的一部分使用。
结果由计算返回。

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

  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

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

⚠️ Heads up!

Because CSS doesn’t support complex units like square pixels, using a number with complex units as a property value will produce an error. This is a feature in disguise, though; if you aren’t ending up with the right unit, it usually means that something’s wrong with your calculations! And remember, you can always use the @debug rule to check out the units of any variable or expression.

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

⚠️ Heads up!

If your arithmetic gives you the wrong unit, you probably need to check your math. You may be leaving off units for a quantity that should have them! Staying unit-clean allows Sass to give you helpful errors when something isn’t right.

You should especially avoid using interpolation like #{$number}px. This doesn’t actually create a number! It creates an unquoted string that looks like a number, but won’t work with any number operations or functions. Try to make your math unit-clean so that $number already has the unit px, or write $number * 1px.

⚠️ Heads up!

Percentages in Sass work just like every other unit. They are not interchangeable with decimals, because in CSS decimals and percentages mean different things. For example, 50% is a number with % as its unit, and Sass considers it different than the number 0.5.

You can convert between decimals and percentages using unit arithmetic. math.div($percentage, 100%) will return the corresponding decimal, and $decimal * 100% will return the corresponding percentage. You can also use the math.percentage() function as a more explicit way of writing $decimal * 100%.

数值运算符

SCSS Syntax

Sass Syntax

SCSS Syntax

Sass Syntax

SCSS Syntax

Sass Syntax

一元运算符一元运算符 permalink

SCSS Syntax

Sass Syntax

⚠️ Heads up!

SCSS Syntax

Sass Syntax

除法除法 permalink

斜线分隔的值斜线分隔的值 permalink

SCSS Syntax

Sass Syntax

UnitsUnits permalink

SCSS Syntax

Sass Syntax

⚠️ Heads up!

SCSS Syntax

Sass Syntax

SCSS Syntax

Sass Syntax

CSS Output

⚠️ Heads up!

⚠️ Heads up!