Calculations

Compatibility:

Dart Sass

since 1.40.0

LibSass

✗

Ruby Sass

✗

▶

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

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

You can also use interpolation in a calculation. However, if you do, nothing in the parentheses that surround 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)!

Simplification permalinkSimplification

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.

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.

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

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

$width: calc(400px + 10%)

.sidebar
  width: $width
  padding-left: calc($width / 4)
==
.sidebar {
  width: calc(400px + 10%);
  padding-left: calc((400px + 10%) / 4);
}

.sidebar {
  width: calc(400px + 10%);
  padding-left: calc($width / 4);
}

Operations permalinkOperations

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.

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

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

min() and max() permalinkmin() and max()

Compatibility (Special function syntax):

Dart Sass

since >=1.11.0 <1.42.0

LibSass

✗

Ruby Sass

✗

▶

CSS added support for min() and max() functions in Values and Units Level 4, from where they were quickly adopted by Safari to support the iPhoneX. But Sass supported its own min() and max() functions 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 min() or max() function call 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 Sass’s core min() or max() 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.

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

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

.post {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

.sidebar {
  padding-left: 20px;
  padding-right: 20px;
}