Operators in SASS

This article explains operators in SASS.

We will explain operators in SASS with practical examples.

YouTube Video

Operators in SASS

SASS operators include numeric operations, comparison operations, logical operations, and string manipulations.

Arithmetic Operations (addition, subtraction, multiplication, division, modulus)

SASS supports standard arithmetic, but division / is confusing with CSS's /, so using math.div() is recommended. Numbers can have units, and operations are only possible between compatible units.

Below are examples of simple arithmetic and usage of the math module.

 1@use "sass:math";
 2
 3$base: 16px;
 4$gutter: 8px;
 5
 6/* Addition and multiplication (allowed since both units are px) */
 7.container {
 8  width: $base + $gutter * 3; // -> 40px
 9}
10
11/* Use math.div() for division (/ is deprecated and triggers a warning) */
12.half {
13  padding: math.div($base, 2); // -> 8px
14}

• This code is an example of addition and multiplication with the px unit, and division using math.div().
• Incompatible units like 10px + 2em will result in an error or unintended results. Unify units or use unit() and unitless() functions.

Handling and automatic conversion of units

SASS handles numbers with units, and the unit rules for calculation results follow general physical rules. For example, px/px becomes unitless. Be careful with unit management when using unit() function or after math.div().

Below are examples showing how to handle mixing unit and unitless values.

1$width: 100px;
2$ratio: 0.5;
3
4.box {
5  /* Multiply width by a ratio (multiplying by a unitless value is fine) */
6  width: $width * $ratio; // -> 50px
7}
8
9/* If you want to remove the unit, combine it with math.div() for the operation */

• Multiplying values with and without units works as expected, but be careful with the resulting unit (or lack thereof) when dividing.

Comparison Operators (==, !=, <, >, <=, >=)

SASS has comparison operators, which can be used for branching in conditionals (@if) and mixins. Comparison of complex types such as colors and lists follows their own rules. Note that color comparisons differ depending on the color space.

Below is an example that compares two numbers and branches the style.

1$breakpoint: 768px;
2
3.container {
4  @if $breakpoint >= 768px {
5    max-width: 1200px;
6  } @else {
7    max-width: 100%;
8  }
9}

• Comparison operators can be combined with @if for responsive and conditional style rules.

Logical Operations (and, or, not)

SASS supports and, or, and not. Use and/or to combine multiple conditions. Precedence and evaluation order can be made explicit using parentheses.

Below is an example of handling complex conditions using logical operators.

 1$mobile: false;
 2$logged-in: true;
 3
 4.notice {
 5  @if $logged-in and not $mobile {
 6    display: block;
 7  } @else {
 8    display: none;
 9  }
10}

• The precedence of and and or can be clarified with parentheses. For complex conditions, using parentheses helps maintain readability and safety.

String Operations — Concatenation and Interpolation

In SASS, string concatenation can be done using + or #{} interpolation. The result of the + operator depends on whether the left string is quoted or unquoted, so using predictable #{} interpolation is safer.

Below are examples of concatenation and interpolation.

 1@use "sass:string";
 2
 3$base: "icon-";
 4$variant: string.unquote("arrow");
 5
 6.icon {
 7  /* Concatenation using + (old style) */
 8  &--old { content: $base + $variant; } // -> icon-arrow
 9
10  /* Interpolation is more reliable */
11  &--new { content: "#{$base}#{$variant}"; } // -> icon-arrow
12}
13
14/* Interpolation is useful for generating selector names, URLs, or animation names */
15@keyframes slide-#{$variant} {
16  from { transform: translateX(0); }
17  to   { transform: translateX(100%); }
18}

• Using interpolation #{} avoids issues with quotes and unintended whitespace insertion.

Color arithmetic (deprecated)

In the past, SASS supported 'color arithmetic', which allowed you to add or subtract numbers to colors. However, color arithmetic is now deprecated, and you should use functions from the sass:color module to manipulate colors.

Below are examples showing that direct color arithmetic is deprecated and suggested alternatives.

 1/* Deprecated (old code example – no longer works or recommended) */
 2/* background: $base-color + 10; */
 3
 4@use "sass:color";
 5
 6$base: #336699;
 7
 8.bg {
 9  /* For example, to increase lightness, use color.scale() or color.adjust() */
10  /* Safe manipulation based on color space */
11  background: color.scale($base, $lightness: 20%);
12  /* Or make it lighter by mixing white */
13  background: color.mix(white, $base, 20%);
14}

• If you want to manipulate colors, use functions from the sass:color module.

Parentheses and Operator Precedence

Use parentheses to control the order of evaluation in operations. Parentheses are always evaluated before operations outside them. Use parentheses in complex expressions to maintain readability.

Below are examples of clarifying evaluation order with parentheses.

1@debug (1 + 2) * 3; // 9
2@debug 1 + 2 * 3;   // 7 (multiplication first)

• As with mathematics, precedence rules apply, so use parentheses to ensure calculations occur in the intended order.

Summary

When using operators in SASS, it is important to write code with future compatibility and readability in mind. In complex expressions, clarify calculation order by using parentheses, and prioritize code readability.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video