Dallonses logo

Sass (SCSS)

What is Sass (SCSS)?

Sass is a preprocessor for CSS. You write stylesheets in a more capable language, and a build step compiles them down to plain CSS the browser understands. SCSS is the most common syntax for it, and it is a superset of CSS, which means any valid CSS file is already valid SCSS. You adopt it without rewriting what you have.

What Sass adds is the structure that plain CSS historically lacked: variables for shared values, nesting that mirrors how elements relate, mixins that package reusable chunks of style, and functions for calculation. A team defining a brand's spacing scale and color palette as variables can reuse them everywhere, then change a single definition to update the whole site. Native CSS has since gained custom properties and nesting, narrowing the gap, but Sass still does more at build time and remains the backbone of countless production codebases. It is less a competitor to CSS than a layer that makes large stylesheets manageable.

The trade-off is the build step. Sass needs to be compiled, which adds tooling, and overusing features like deep nesting can quietly produce bloated CSS. Used with discipline, it keeps a big design system coherent.

Sass (SCSS) at Dallonses

When a project's styling is large enough to need real structure, Sass is often how we give it that structure. Variables, mixins, and a sensible file organization turn a sprawling stylesheet into something a team can navigate, where changing the brand's accent color is one edit rather than a search-and-replace across the codebase.

We lean on it most in design systems development, where consistency across many components and pages is the whole point. Shared tokens defined once and reused everywhere keep the product visually coherent as it grows, and keep the styling maintainable for the client's team after we hand it over. We use the features that earn their place and skip the ones that just add cleverness, because a stylesheet should be easy to read, not a puzzle.

Styles sprawling past what plain CSS can hold together? Let's give them structure.

Talk to us about your styles

Related services


Ready to work together?

Book a meeting
Aymón holding a Tools magazine in front of their facem
Ari working on a laptop outdoors surrounded by plants
Top-down view of a wooden desk with a keyboard, mouse, and headphones
Hand-drawn illustration of a hand snapping fingers
Nico leaning against a water cooler next to a fire extinguishe
Close-up of an open computer with circuit board and components on a wooden desk
Bernat and Andreu collaborating at a desk with monitors and a laptop
Hand-drawn illustration of an open hand waving
Aymón holding a Tools magazine in front of their facem
Ari working on a laptop outdoors surrounded by plants
Top-down view of a wooden desk with a keyboard, mouse, and headphones
Hand-drawn illustration of a hand snapping fingers
Nico leaning against a water cooler next to a fire extinguishe
Close-up of an open computer with circuit board and components on a wooden desk
Bernat and Andreu collaborating at a desk with monitors and a laptop
Hand-drawn illustration of an open hand waving