Sass: the CSS preprocessor that changed styling

Cloud & Web Apps

Development of modern web applications and APIs, cloud native architectures, containers, CI/CD. End-to-end open source tech stack.

Discover →

The limit of raw CSS

In the mid-2000s CSS lacks basic features: no variables, no functions, no modules, no reuse. Large stylesheets become repetitive (colours replicated everywhere, calculations by hand). The community seeks preprocessing tools.

Sass is born

Sass (Syntactically Awesome Style Sheets) is created by Hampton Catlin in 2006 and developed primarily by Natalie Weizenbaum from 2008 onward. Initially part of the Haml framework (HTML templates for Rails). MIT licence.

The original syntax is indented, Python-like:

$primary: #3B79B0

.card
  background: $primary
  &:hover
    background: darken($primary, 10%)

SCSS: the turning point

In 2010 (Sass 3.0, “Classy Cassidy”) arrives SCSS (Sassy CSS), a CSS-compatible syntax with curly braces and semicolons:

$primary: #3B79B0;

.card {
  background: $primary;
  &:hover { background: darken($primary, 10%); }
}

Every valid CSS is also valid SCSS. This choice explodes adoption.

Main features

• Variables — $primary: #3B79B0
• Nesting — rules nested like HTML
• Partials — _buttons.scss importable with @import or @use
• Mixins — reusable blocks with parameters @mixin, @include
• Functions — @function logic, mathematical operators
• Color functions — darken(), lighten(), mix(), rgba()
• Loops and conditionals — @each, @for, @if
• Placeholders — %class-name with @extend

Implementations

• Ruby Sass — original, deprecated March 2019
• LibSass — C/C++ port (Sass 3, end 2020)
• Dart Sass — current implementation, faster and more up-to-date; reference standard since 2020

Dart Sass introduced the Sass 2.0 module system (@use, @forward) as evolution of @import.

Ecosystem

• Compass (2009, Chris Eppstein) — framework on Sass, deprecated
• Bourbon — mixins library
• Default integration in Rails, React create-app, Vite, Next.js
• Bootstrap 4+ written in SCSS

Competitors

• Less (2009) — similar syntax, JS implementation
• Stylus (2010) — more compact, niche
• PostCSS (2013) — not a preprocessor but a modular transformer

In the Italian context

Every Italian agency, design studio and frontend team since 2012-2013 adopted Sass/SCSS as a standard. Custom WordPress projects, Rails applications, Plone/Django portals, modern Astro sites: SCSS everywhere in the toolchain. The noze.it and noferi.it sites themselves are written in custom SCSS.

References: Sass (2006). Hampton Catlin, Natalie Weizenbaum. MIT licence. SCSS syntax introduced with Sass 3.0 (2010). Dart Sass current standard. Sass 2.0 module system (@use, @forward).