SASS: The CSS Preprocessor That Survived the Apocalypse

In the fast-paced world of web development, where technologies are born and die at an accelerated pace, there are tools that have demonstrated extraordinary resilience. SASS is one of them. Far from being a relic of the past, this CSS preprocessor has managed to adapt and remain relevant in a constantly evolving ecosystem.

There is a fundamental difference between technologies that are outdated and those that are simply reliable. SASS belongs to this second category: a mature tool that has found its place in the modern web development ecosystem.

To understand the value of SASS in 2025, it’s important to contextualize the different approaches that exist today for writing styles:

The Current Landscape of Web Styling

Before diving into SASS, let’s explore the current landscape of web styling.

Utility-First: The Revolution of Reusable Classes

Frameworks like Tailwind CSS have popularized the “utility-first” methodology, where instead of writing custom CSS, we build interfaces by combining utility classes:

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
<div class="md:flex">
<div class="md:shrink-0">
<img class="h-48 w-full object-cover md:h-full md:w-48" src="image.jpg" alt="Card">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
Tailwind CSS
</div>
<p class="mt-2 text-slate-500">
A utility-first CSS framework
</p>
</div>
</div>
</div>

Component-First: Predefined Components

On the other hand, frameworks like Bootstrap follow the philosophy of predefined components:

<div class="card">
<img src="image.jpg" alt="Card">
<div class="card-body">
<h2 class="card-title">Bootstrap</h2>
<p>A component-based CSS framework</p>
</div>
</div>

CSS-in-JS: Styles Within JavaScript

Solutions like styled-components integrate styles directly into JavaScript code:

import styled from 'styled-components';

const Button = styled.button`
background: palevioletred;
color: white;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;

export default function App() {
return <Button>Click me</Button>;
}

Modern Native CSS

Native CSS has evolved significantly, incorporating functionalities that were previously only available in preprocessors:

/* Native variables */
:root {
--primary-color: #3498db;
--spacing: 1rem;
}

/* Nesting (supported in modern browsers) */
.card {
padding: var(--spacing);

&:hover {
transform: scale(1.05);
}

& .title {
color: var(--primary-color);
}
}

/* Container queries */
@container (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 1fr 2fr;
}
}

CSS Postprocessors

Postprocessors like PostCSS, with plugins such as autoprefixer and cssnano, process already-written CSS to optimize it and add compatibility:

.example {
display: flex;
transition: all 0.3s ease;

&:hover {
transform: scale(1.05);
}
}

What is SASS and Why Does It Remain Relevant?

SASS is a metalanguage that generates CSS. It provides a language richer in functionality and syntax than pure CSS, allowing you to use styles that aren’t yet compatible with all browsers, perform complex operations, implement loops, conditionals, more flexible variables, import other CSS files, nest styles, and manipulate colors in advanced ways.

Hello SASS: Your First Contact

A basic SASS example demonstrates its syntactic elegance:

# main.sass
$color__primary: #3498db
$gap__m: 1rem

.link
display: inline-block
color: $color__primary
padding:
block: $gap__m
inline: $gap__m / 2
&:hover
text-decoration: underline

To compile it, we simply run:

sass main.sass main.css

And we get optimized CSS:

.link {
display: inline-block;
color: #3498db;
padding: 1rem 0.5rem;
}
.link:hover {
text-decoration: underline;
}

The Two Faces of SASS: SCSS vs SASS

SASS offers two different syntaxes. The SCSS syntax, more similar to traditional CSS:

$color__primary: #3498db;
$gap__m: 1rem;

.link {
display: inline-block;
color: $color__primary;
padding:
block: $gap__m;
inline: $gap__m / 2;
&:hover {
text-decoration: underline;
}
}

And the indented SASS syntax, more minimalist and similar to Python:

$color__primary: #3498db
$gap__m: 1rem

.link
display: inline-block
color: $color__primary
padding:
block: $gap__m
inline: $gap__m / 2
&:hover
text-decoration: underline

Both syntaxes are equally powerful, and the choice between them depends on personal or team preferences.

Features

Variables with Local Scope

Despite CSS now supporting variables, SASS offers a more flexible variable system.

$color__link: #5498db

.link
$color__link: #ff6347
color: $color__link

Mixins: Functions That Generate CSS

Mixins are one of SASS’s most powerful features. They allow you to define reusable code blocks with parameters.

@mixin square-image($width, $circular: false)
width: $width
height: $width
object-fit: cover
object-position: center
@if $circular
border-radius: 50%

.box
@include square-image(100px, true)

Inheritance with @extend

You can share rules between selectors using @extend:

.input
display: inline-block
border-radius: .5rem
padding:
block: .7rem
inline: 1.2rem
resize: none
&:focus
outline: none

.textarea
@extend .input
height: 150px

Control Flow

SASS includes complete control structures:

$theme: dark

body
@if $theme == light
background: #fff
color: #000
@else if $theme == dark
background: #000
color: #fff
@else
background: #f0f0f0
color: #333

Loops for Automation

Perfect for generating repetitive styles. In this example, we create animated rain drops:

@for $i from 1 through 50
.raindrop:nth-child(#{$i})
left: #{random(100)}%
animation:
name: fall
delay: #{random(2000)/1000}s
duration: #{1 + random(2)}s
opacity: #{0.3 + random(70)/100}

@keyframes fall
from
top: -20px
to
top: 100vh

Modular Organization: The Key to Large Projects

One of SASS’s greatest strengths is its ability to organize code in a modular way:

// Imports
@use "vendors/normalize"

// Abstracts
@use "abstracts/variables"
@use "abstracts/mixins"
@use "abstracts/animations"

// Base
@use "base/typography"
@use "base/base"
@use "base/helpers"

// Components
@use "desktop/components/link"
@use "desktop/components/button"
@use "desktop/components/image"
@use "desktop/components/input"
@use "desktop/components/tags"
@use "desktop/components/notification"

// Layout
@use "desktop/layout/header"
@use "desktop/layout/footer"

// Pages
@use "desktop/pages/home"
@use "desktop/pages/blog"
@use "desktop/pages/talks"
@use "desktop/pages/books"

The example above comes directly from this website. Each file has a clear responsibility, which facilitates project maintenance and scalability.

Integration with Modern Tools

SASS integrates perfectly with current build tools like Vite:

// vite.config.js
import { resolve } from 'path';
export default {
root: 'assets',
base: '/static/',
publicDir: resolve('./assets/public'),
build: {
manifest: true,
outDir: resolve("./static"),
rollupOptions: {
input: {
sass: 'assets/sass/main.sass',
}
},
}
}

Methodologies: BEM and SASS, A Perfect Combination

SASS greatly facilitates the implementation of methodologies like BEM:

.header
width: 100%
&__
&logo
width: 10rem
&nav
display: flex
&--
&collapsed
height: 0

Which generates:

.header {
width: 100%;
}

.header__logo {
width: 10rem;
}

.header__nav {
display: flex;
}

.header__nav--collapsed {
height: 0;
}

What SASS Provides That Native CSS Doesn’t Have Yet

Although CSS has evolved greatly, SASS still offers unique advantages:

• More flexible and minimalist variables
• Selector nesting with advanced concatenation
• Mixins, which function as reusable CSS-generating functions
• Robust inheritance that allows sharing rules between selectors
• Complete control flow with conditionals and loops
• Advanced modularity to divide CSS into multiple files
• Complex mathematical operations with different units
• Advanced color manipulation
• Lists, maps, and built-in functions
• Guaranteed compatibility with older browsers

But the real value goes beyond the code:

• Architecture: Facilitates the creation of solid and maintainable CSS architectures.
• Scalability: Allows projects to grow without CSS becoming unmanageable.
• Consistency: Promotes consistent patterns throughout the project.
• Teamwork: Facilitates collaboration between developers with clear conventions.
• Library Integration: Easily integrates with existing frameworks and libraries.
• Productivity: Significantly reduces development and maintenance time.

Will It Remain Relevant in the Future?

The answer is a resounding yes, for several fundamental reasons:

The community remains active with periodic updates that keep SASS up to date with modern needs. The new version written in Dart has significantly improved performance and compatibility, replacing the Ruby version and also offering a Node.js version.

Many established companies and projects continue to use SASS, which guarantees its long-term health. Additionally, its excellent integration with modern build tools and frameworks demonstrates its adaptability.

Conclusion

That SASS isn’t mainstream doesn’t mean it’s bad or dead. In a world where the new is often confused with the best, SASS represents maturity and reliability. It’s a tool that has proven its value over time and continues to evolve to remain relevant.

For developers working on medium to large-scale projects, SASS remains an excellent choice that brings structure, power, and elegance to style development. It’s not a passing fad, but a consolidated tool that has found its place in the modern web development ecosystem.

In short, SASS didn’t just survive the CSS apocalypse—it thrived by delivering real value.