Sass: il CSS preprocessor che ha cambiato lo styling

Cloud & Web Apps

Sviluppo di applicazioni web e API moderne, architetture cloud native, container, CI/CD. Stack tecnologico open source end-to-end.

Scopri →

Il limite del CSS raw

A metà anni 2000 il CSS manca di funzionalità basilari: nessuna variabile, nessuna funzione, nessun modulo, nessuna possibilità di riutilizzo. Fogli di stile grandi diventano ripetitivi (colori replicati ovunque, calcoli a mano). La comunità cerca strumenti di preprocessing.

Sass nasce

Sass (Syntactically Awesome Style Sheets) è creato da Hampton Catlin nel 2006 e sviluppato principalmente da Natalie Weizenbaum dal 2008 in poi. Inizialmente fa parte del framework Haml (template HTML per Rails). Licenza MIT.

La sintassi originale è indentata, Python-like:

$primary: #3B79B0

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

SCSS: la svolta

Nel 2010 (Sass 3.0, “Classy Cassidy”) arriva SCSS (Sassy CSS), sintassi CSS-compatibile con parentesi graffe e punti e virgola:

$primary: #3B79B0;

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

Ogni CSS valido è anche SCSS valido. Questa scelta fa esplodere l’adozione.

Feature principali

• Variabili — $primary: #3B79B0
• Nesting — regole annidate come l’HTML
• Partials — _buttons.scss importabili con @import o @use
• Mixins — blocchi riusabili con parametri @mixin, @include
• Functions — logica @function, operatori matematici
• Color functions — darken(), lighten(), mix(), rgba()
• Loops e conditionals — @each, @for, @if
• Placeholders — %class-name con @extend

Implementazioni

• Ruby Sass — originale, deprecata marzo 2019
• LibSass — port C/C++ (Sass 3, fine 2020)
• Dart Sass — implementazione attuale, più veloce e aggiornata; standard riferimento dal 2020

Dart Sass ha portato la Sass 2.0 module system (@use, @forward) come evoluzione di @import.

Ecosistema

• Compass (2009, Chris Eppstein) — framework su Sass, deprecato
• Bourbon — libreria mixins
• Integrazione di default in Rails, React create-app, Vite, Next.js
• Bootstrap 4+ scritto in SCSS

Concorrenti

• Less (2009) — sintassi simile, implementazione JS
• Stylus (2010) — più compatto, nicchia
• PostCSS (2013) — non preprocessor ma trasformatore modulare

Nel contesto italiano

Ogni agenzia, studio di design e team di frontend italiano dagli anni 2012-2013 ha adottato Sass/SCSS come standard. Progetti WordPress custom, applicazioni Rails, portali Plone/Django, siti Astro moderni: ovunque SCSS nella toolchain. Anche il sito noze.it e noferi.it sono scritti in SCSS custom.

Riferimenti: Sass (2006). Hampton Catlin, Natalie Weizenbaum. Licenza MIT. SCSS syntax introdotta con Sass 3.0 (2010). Dart Sass standard attuale. Sass 2.0 module system (@use, @forward).