Doing Math and Logic Inside Your Stylesheets with SCSS Operators

Plain CSS is mostly a list of fixed values. You write a width, a colour, a padding, and that is what you get. SCSS operators change that by letting you calculate values, compare them, and make decisions based on the result, all at compile time. A column width can be derived from a total width divided by a column count. A class name can be assembled from a variable. A block of styles can be applied only when certain conditions hold. This turns a stylesheet from a static list into something closer to logic that produces CSS.

Arithmetic: Calculating Values

The arithmetic operators do exactly what you would expect, working on numbers and measurements. Their most common use is deriving one value from others so that related measurements stay in sync.

Addition combines two values:

$base-padding: 10px;
$extra-padding: 5px;
$total-padding: $base-padding + $extra-padding; // 15px

Subtraction takes one away from another, which is handy for things like fitting content inside a container after accounting for a gutter:

$container-width: 100px;
$gutter: 20px;
$content-width: $container-width - $gutter; // 80px

Multiplication scales a value, useful when a total depends on a repeated unit:

$column-width: 200px;
$column-count: 3;
$grid-width: $column-width * $column-count; // 600px

Division goes the other way, splitting a total into parts:

$grid-width: 600px;
$column-count: 3;
$column-width: $grid-width / $column-count; // 200px

The value of doing this with operators rather than typing the final number is that the relationship is preserved. If the column count changes, the dependent values recalculate. You are encoding the logic of your layout, not just its current result.

A caveat on division specifically: because the slash character has meaning in plain CSS, such as in font: 16px/1.5, newer versions of Sass have moved division into a dedicated math module. The modern, conflict-free way to divide is math.div($grid-width, $column-count) after importing the module with @use 'sass:math'. The plain / still appears in older code and tutorials, but if you are writing new SCSS, prefer math.div().

String Interpolation: Building Values from Variables

Interpolation lets you drop a variable’s value into the middle of a string using the #{} syntax. This is what makes it possible to generate class names, file paths, and other strings dynamically:

$icon-name: "user";
.profile-icon {
  content: "icon-#{$icon-name}"; // becomes "icon-user"
}

It is especially useful for constructing URLs where part of the path lives in a variable:

$asset-path: "/images/icons";
.menu-icon {
  background-image: url("#{$asset-path}/menu.png");
}

Interpolation evaluates the variable and splices its value into the surrounding text. Without it, the variable name would be treated as literal text rather than substituted. It is the bridge between SCSS’s variables and the string-based parts of CSS.

Comparisons: Asking Questions About Values

The relational and equality operators compare two values and return either true or false. On their own they do nothing visible, but inside an @if directive they let your stylesheet make decisions.

Equality and inequality check whether two values match:

$brand-blue: #3498db;
$link-color: #3498db;
@if $brand-blue == $link-color {
  // True: the two colours are the same
}

The ordering operators, greater than, less than, and their “or equal to” variants, compare magnitudes, which is most useful with numeric values:

$container-width: 100px;
@if $container-width > 50px {
  // True: the width exceeds 50px
}

These comparisons are the building blocks of conditional styling. They turn a value into a yes-or-no question that the next layer of logic can act on.

Logical Operators: Combining Conditions

The logical operators, and, or, and not, let you combine several conditions into one. This is where conditional logic in SCSS becomes genuinely expressive:

$light-theme: true;
$contrast-level: 5;
@if $light-theme and $contrast-level > 3 {
  body {
    background-color: #fff;
    color: #333;
  }
}
@if not $light-theme {
  body {
    background-color: #333;
    color: #fff;
  }
}

The first block applies only when both conditions are true: the theme is light and the contrast level is above three. The second uses not to invert a condition, applying its styles only when the theme is not light. Combining conditions this way lets a single stylesheet adapt its output based on a handful of configuration variables, which is the foundation of theming and feature flags in SCSS.

A Few Guidelines

Use parentheses to make the order of operations explicit in anything beyond the simplest calculation. SCSS follows standard math precedence, but a reader should not have to recall those rules to understand your intent. ($base + $extra) * 2 is unambiguous in a way that relying on precedence is not.

Prefer math.div() over the / operator for division. It avoids the ambiguity with CSS’s own use of the slash and is the direction the language is moving.

Keep conditions readable. When a comparison or a combination of logical operators grows long, format it clearly and consider whether a well-named intermediate variable would make the intent obvious. A condition that takes a moment to parse is a condition that will be misread eventually.

Use interpolation where dynamic strings are genuinely needed, but do not reach for it to build elaborate selectors that would be clearer written plainly. Like all of these tools, it earns its place when it removes repetition or expresses a real relationship, not when it adds cleverness for its own sake.

The Takeaway

Operators are what let SCSS compute rather than just declare. Arithmetic derives values and keeps related measurements in sync. Interpolation builds strings from variables. Comparisons and logical operators let your stylesheet make decisions and apply styles conditionally. The main thing to keep in mind is that the slash is overloaded in CSS, so modern SCSS uses math.div() for division. Used with clear grouping and readable conditions, operators turn a stylesheet into something that expresses the logic behind your design, not merely its final values.

See you soon.