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%)

Feature principali

• Variabili — $primary: #3B79B0
• Nesting — regole annidate come l’HTML
• Partials — _buttons.scss importabili con @import
• 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

Ecosistema iniziale

L’implementazione è Ruby Sass (gem installabile via gem install haml). Il framework Haml (template engine) include Sass come componente, ma Sass è già distribuibile come tool indipendente.

Nel contesto italiano

Nei team frontend italiani più aggiornati Sass inizia a comparire nei progetti Rails e in alcuni WordPress custom. L’adozione di massa dipenderà dalla capacità di Sass di staccarsi da Haml e di offrire una sintassi più vicina a CSS.

Riferimenti: Sass (2006). Hampton Catlin, Natalie Weizenbaum. Licenza MIT. Haml e Ruby Sass come prima distribuzione.