Skip to content
Tutorial Reference

Sass Parentheses

How to use parentheses in Sass to explicitly control operation order and evaluate nested expressions first in both SCSS and Sass syntax.

You can explicitly control the order of operations using parentheses. An operation inside parentheses is always evaluated before any operations outside of them. Parentheses can even be nested, in which case the innermost parentheses will be evaluated first.

Examples

SCSS syntax

@debug (1 + 2) * 3;           // 9
@debug ((1 + 2) * 3 + 4) * 5; // 65

Sass (indented) syntax

@debug (1 + 2) * 3            // 9
@debug ((1 + 2) * 3 + 4) * 5  // 65

Operator precedence without parentheses

Sass follows the same operator precedence as standard math and most programming languages. Multiplication and division have higher precedence than addition and subtraction, so they are evaluated first unless parentheses override that order.

Expression Evaluated as Result
1 + 2 * 3 1 + (2 * 3) 7
(1 + 2) * 3 (1 + 2) * 3 9 
@debug 1 + 2 * 3;      // 7
@debug (1 + 2) * 3;    // 9

Real-world use cases

1. Complex calculations in property values

Parentheses make long calculations readable and ensure the intended order:

.container {
  width: calc(100% - (#{$gutter} * 2 + #{2 * $padding}));
}

2. Overriding default precedence in mixins

@mixin ratio($w, $h) {
  aspect-ratio: #{(100 / $h) * $w} / 100;
}

Without parentheses, 100 / $h * $w would be evaluated as (100 / $h) * $w, which is actually correct here. But adding parentheses makes the intent explicit:

@mixin ratio($w, $h) {
  aspect-ratio: #{( (100 / $h) * $w )} / 100;
}

3. Nested expressions in functions

@function lerp($start, $end, $t) {
  @return $start + (($end - $start) * $t);
}

@debug lerp(0, 100, 0.5); // 50

Here, (($end - $start) * $t) must be parenthesized so the subtraction happens before the multiplication.

Precedence table

Sass operator precedence (highest to lowest):

Precedence Operators Notes
1 () Parentheses override all other precedence
2 ** Exponentiation (right-associative)
3 *, /, % Multiplication, division, modulo
4 +, - Addition, subtraction
5 ==, !=, <, <=, >, >= Equality and relational
6 and, or, not Logical operators

Summary

  • Parentheses explicitly control evaluation order: innermost expressions are evaluated first.
  • Use parentheses to override default precedence when the intended order differs from Sass's built-in rules.
  • Parentheses work identically in both SCSS ({ }) and Sass (indented) syntax.
  • Parentheses are especially useful for complex calc() expressions, mixin calculations, and function bodies.
  • When in doubt, add parentheses to make the code's intent clearer to future readers.
Navigation