Numeric Operators

• <expression> + <expression> adds the first expression’s value to the second’s.
• <expression> - <expression> subtracts the first expression’s value from the second’s.
• <expression> * <expression> multiplies the first expression’s value by the second’s.
• <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.

Unary OperatorsUnary Operators permalink

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

• +<expression> returns the expression’s value without changing it.
• -<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.

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

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

DivisionDivision permalink

Compatibility (math.div()):

Dart Sass

since 1.33.0

LibSass

✗

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

Slash-Separated ValuesSlash-Separated Values permalink

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.

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