Calculations

Calculations are how Sass represents the calc() function, as well as similar functions like clamp(), min(), and max(). Sass will simplify these as much as possible, even if they’re combined with one another.

Compatibility:
Dart Sass
since 1.40.0
LibSass
✗
Ruby Sass
✗
Compatibility (Adjacent values):
Dart Sass
since 1.67.0
LibSass
✗
Ruby Sass
✗

SCSS Syntax

@debug calc(400px + 10%); // calc(400px + 10%)
@debug calc(400px / 2); // 200px
@debug min(100px, calc(1rem + 10%)); // min(100px, 1rem + 10%)

Calculations use a special syntax that’s different from normal SassScript. It’s the same syntax as the CSS calc(), but with the additional ability to use Sass variables and call Sass functions. This means that / is always a division operator within a calculation!

💡 Fun fact:

The arguments to a Sass function call use the normal Sass syntax, rather than the special calculation syntax!

You can also use interpolation in a calculation. However, if you do, no operations that involve that interpolation will be simplified or type-checked, so it’s easy to end up with extra verbose or even invalid CSS. Rather than writing calc(10px + #{$var}), just write calc(10px + $var)!

SimplificationSimplification permalink

Sass will simplify adjacent operations in calculations if they use units that can be combined at compile-time, such as 1in + 10px or 5s * 2. If possible, it’ll even simplify the whole calculation to a single number—for example, clamp(0px, 30px, 20px) will return 20px.

⚠️ Heads up!

This means that a calculation expression won’t necessarily always return a calculation! If you’re writing a Sass library, you can always use the meta.type-of() function to determine what type you’re dealing with.

Calculations will also be simplified within other calculations. In particular, if a calc() end up inside any other calculation, the function call will be removed and it’ll be replaced by a plain old operation.

SCSS Syntax

$width: calc(400px + 10%);

.sidebar {
  width: $width;
  padding-left: calc($width / 4);
}

OperationsOperations permalink

You can’t use calculations with normal SassScript operations like + and *. If you want to write some math functions that allow calculations just write them within their own calc() expressions—if they’re passed a bunch of numbers with compatible units, they’ll return plain numbers as well, and if they’re passed calculations they’ll return calculations.

This restriction is in place to make sure that if calculations aren’t wanted, they throw an error as soon as possible. Calculations can’t be used everywhere plain numbers can: they can’t be injected into CSS identifiers (such as .item-#{$n}), for example, and they can’t be passed to Sass’s built-in math functions. Reserving SassScript operations for plain numbers makes it clear exactly where calculations are allowed and where they aren’t.

SCSS Syntax

$width: calc(100% + 10px);
@debug $width * 2; // Error!
@debug calc($width * 2); // calc((100% + 10px) * 2);

ConstantsConstants permalink

Compatibility:
Dart Sass
since 1.60.0
LibSass
✗
Ruby Sass
✗

Calculations can also contain constants, which are written as CSS identifiers. For forwards-compatibility with future CSS specs, all identifiers are allowed, and by default they’re just treated as unquoted strings that are passed-through as-is.

SCSS Syntax

@debug calc(h + 30deg); // calc(h + 30deg);

Sass automatically resolves a few special constant names that are specified in CSS to unitless numbers:

SCSS Syntax

@use 'sass:math';

@debug calc(pi); // 3.1415926536
@debug calc(e);  // 2.7182818285
@debug calc(infinity) > math.$max-number;  // true
@debug calc(-infinity) < math.$min-number; // true

Calculation FunctionsCalculation Functions permalink

Compatibility (Additional functions):
Dart Sass
since 1.65.0
LibSass
✗
Ruby Sass
✗

Sass parses the following functions as calculations:

💡 Fun fact:

If you’ve defined a Sass function with the same name as a calculation function, Sass will always call your function instead of creating a calculation value.

Legacy Global FunctionsLegacy Global Functions permalink

CSS added support for mathematical expressions in Values and Units Level 4. However, Sass supported its own round(), abs(), min() and max() long before this, and it needed to be backwards-compatible with all those existing stylesheets. This led to the need for extra-special syntactic cleverness.

If a call to round(), abs(), min(), or max() is a valid calculation expression, it will be parsed as a calculation. But as soon as any part of the call contains a SassScript feature that isn’t supported in a calculation, like the modulo operator, it’s parsed as a call to the appropriate Sass math function instead.

Since calculations are simplified to numbers when possible anyway, the only substantive difference is that the Sass functions only support units that can be combined at build time, so min(12px % 10, 10%) will throw an error.

⚠️ Heads up!

Other calculations don’t allow unitless numbers to be added to, subtracted from, or compared to numbers with units. min(), max(), abs() and single-argument round() are different, though: for backwards-compatibility with the global Sass legacy functions which allow unit/unitless mixing for historical reasons, these units can be mixed as long as they’re contained directly within a min(), max(), abs(), or single-argument round() calculation.

For instance, min(5 + 10px, 20px) will result in 15px. However sqrt(5 + 10px) will throw an error, as sqrt(5 + 10px) was never a global Sass function, and these are incompatible units.

min() and max()min() and max() permalink

Compatibility (min and max syntax):
Dart Sass
since >=1.11.0 <1.42.0
LibSass
✗
Ruby Sass
✗

SCSS Syntax

$padding: 12px;

.post {
  // Since these max() calls are valid calculation expressions, they're
  // parsed as calculations.
  padding-left: max($padding, env(safe-area-inset-left));
  padding-right: max($padding, env(safe-area-inset-right));
}

.sidebar {
  // Since these use the SassScript-only modulo operator, they're parsed as
  // SassScript function calls.
  padding-left: max($padding % 10, 20px);
  padding-right: max($padding % 10, 20px);
}

round()round() permalink

Compatibility (min and max syntax):
Dart Sass
since 1.65.0
LibSass
✗
Ruby Sass
✗

The round(<strategy>, number, step) function accepts an optional rounding strategy, a value to be rounded and a rounding interval step. strategy should be nearest, up, down, or to-zero.

SCSS Syntax

$number: 12.5px;
$step: 15px;

.post-image {
  // Since these round() calls are valid calculation expressions, they're
  // parsed as calculations.
  padding-left: round(nearest, $number, $step);
  padding-right: round($number + 10px);
  padding-bottom: round($number + 10px, $step + 10%);
}

abs()abs() permalink

Compatibility (min and max syntax):
Dart Sass
since 1.67.0
LibSass
✗
Ruby Sass
✗

⚠️ Heads up!

The global abs() function compatibiliy with % unit parameters is deprecated. In the future, this will emit a CSS abs() function to be resolved by the browser.

The abs(value) takes in a single expressiona as a parameter and returns the absolute value of $value. If $value is negative, this returns -$value, and if $value is positive, it returns $value as-is.

SCSS Syntax

.post-image {
  // Since these abs() calls are valid calculation expressions, they're
  // parsed as calculations.
  padding-left: abs(10px);
  padding-right: math.abs(-7.5%);
  padding-top: abs(1 + 1px);
}