Introduzione a SASS

Sass (Syntactically Awesome Style Sheets) è il preprocessore CSS più popolare al mondo. Aggiunge al CSS funzionalità mancanti come variabili, nesting, mixin, funzioni e moduli, permettendo di scrivere fogli di stile più organizzati, riutilizzabili e manutenibili.

Sass viene compilato in CSS standard: scrivi codice Sass, esegui il compilatore e ottieni un file .css pronto per il browser. Questo significa zero dipendenze a runtime — il browser riceve CSS normale.

Perché usare Sass?

Variabili — definisci colori, font e dimensioni una volta sola e riusali ovunque
Nesting — specchia la struttura HTML nel CSS, elimina la ripetizione dei selettori
Mixin — blocchi di stile riutilizzabili con parametri (come funzioni nel CSS)
@extend — condividi regole tra selettori senza duplicare il codice
Moduli — dividi i tuoi stili in file separati organizzati per componente
Funzioni built-in — manipola colori, stringhe, numeri e liste direttamente in Sass
Operatori — calcola dimensioni e valori con espressioni matematiche

SCSS vs Sass (sintassi indented)

	SCSS	Sass (indented)
Estensione	.scss	.sass
Sintassi	Come CSS + superset	Indentazione, senza {}
Compatibilità CSS	100% — qualsiasi CSS è SCSS valido	No — sintassi diversa
Popolarità	🥇 Standard de facto	Meno comune

Prima differenza SCSS vs Sass

SCSS

// SCSS — simile al CSS
$primary: #4f46e5;

.card {
  background: $primary;
  border-radius: 8px;

  h2 {
    color: white;
    font-size: 1.5rem;
  }
}

CSS compilato

.card {
  background: #4f46e5;
  border-radius: 8px;
}
.card h2 {
  color: white;
  font-size: 1.5rem;
}

💡 Sass vs SCSS: in questo corso usiamo SCSS (la sintassi moderna con le parentesi graffe), che è lo standard adottato da tutti i framework CSS moderni come Bootstrap, Tailwind e Angular Material.

Sass — Introduzione

Sass è stato creato nel 2006 da Hampton Catlin e Natalie Weizenbaum. Oggi è mantenuto da un team attivo e ha diventato lo standard per la gestione avanzata degli stili in progetti frontend di medie e grandi dimensioni.

Come funziona la compilazione

1️⃣ Scrivi i tuoi stili in file .scss
2️⃣ Il compilatore Sass legge i file e risolve variabili, mixin, nesting ecc.
3️⃣ Produce uno o più file .css standard
4️⃣ Il browser carica il CSS compilato — non conosce Sass

Flusso di lavoro Sass

// styles.scss (scrivi tu)
$brand-color: #4f46e5;
$radius: 8px;

.button {
  background: $brand-color;
  border-radius: $radius;
  padding: .6rem 1.2rem;
  color: white;

  &:hover {
    background: darken($brand-color, 10%);
  }
}

styles.css (generato automaticamente)

.button {
  background: #4f46e5;
  border-radius: 8px;
  padding: .6rem 1.2rem;
  color: white;
}
.button:hover {
  background: #3730a3;
}

Dove viene usato Sass

Bootstrap 5 — tutto il framework è scritto in SCSS
Angular — usa SCSS di default per i component styles
Vue CLI / Vite — supporto SCSS integrato con un semplice plugin
Create React App / Vite — npm install sass e sei pronto
WordPress — i temi professionali usano SCSS per la manutenibilità
Design system — Salesforce Lightning, IBM Carbon, Material Design tutti usano Sass

🚀 Ambiente per esercitarsi: usa SassMeister per provare il codice Sass online senza installare nulla — vedi subito il CSS compilato.

Sass — Installazione

Puoi installare Sass in tre modi principali: tramite npm (il più comune nei progetti moderni), tramite il package standalone o tramite Homebrew su macOS.

Via npm (consigliato)

Installa Sass con npm

# Installa Sass globalmente
npm install -g sass

# Verifica l'installazione
sass --version
# Dart Sass 1.x.x

# Oppure installalo nel progetto (dipendenza di sviluppo)
npm install --save-dev sass

Compila un file SCSS

Compilazione da riga di comando

# Compila una volta sola
sass input.scss output.css

# Modalità watch (ricompila automaticamente ad ogni salvataggio)
sass --watch input.scss output.css

# Watch su cartella intera
sass --watch scss/:css/

# Con source map (per il debug in browser DevTools)
sass --watch --source-map scss/:css/

# Output compresso (produzione)
sass --style=compressed input.scss output.min.css

Integrazione con Vite (React/Vue)

Sass in un progetto Vite

# Crea progetto Vite
npm create vite@latest my-app -- --template react

cd my-app
npm install

# Aggiungi Sass (nessuna configurazione aggiuntiva necessaria!)
npm install --save-dev sass

# Ora puoi importare file .scss direttamente nei componenti
# In React:
# import './styles.scss'

# In Vue SFC:
# <style lang="scss">
#   .card { color: $primary; }
# </style>

VS Code — estensioni utili

Live Sass Compiler — compila automaticamente i file SCSS al salvataggio
SCSS IntelliSense — autocompletamento per variabili, mixin e funzioni Sass
Sass — syntax highlighting per file .sass e .scss

📌 Dart Sass vs LibSass: il compilatore ufficiale attuale è Dart Sass. LibSass (C++) è deprecato dal 2020. Alcuni strumenti vecchi usavano node-sass (basato su LibSass): se lo vedi in un progetto, aggiornalo a sass (Dart Sass).

Sass — Variabili

Le variabili Sass iniziano con $ e permettono di definire valori riutilizzabili — colori, font, spaziature, breakpoint — in un unico posto. Se cambi una variabile, l'intera UI si aggiorna automaticamente.

Variabili base

SCSS

// Definizione variabili
$primary:    #4f46e5;
$secondary:  #06b6d4;
$accent:     #f59e0b;
$gray-100:   #f8fafc;
$gray-900:   #0f172a;

$font-base:  'Inter', sans-serif;
$font-head:  'Poppins', sans-serif;

$radius-sm:  4px;
$radius-md:  8px;
$radius-lg:  16px;

$shadow:     0 4px 6px -1px rgba(0,0,0,.1);

// Utilizzo
.card {
  background:    $gray-100;
  border-radius: $radius-md;
  box-shadow:    $shadow;
  font-family:   $font-base;
}

.btn-primary {
  background: $primary;
  color:      white;
}

CSS compilato

.card {
  background: #f8fafc;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
  font-family: "Inter", sans-serif;
}
.btn-primary {
  background: #4f46e5;
  color: white;
}

Scope delle variabili

Variabili locali vs globali

SCSS

$colore: blue;     // globale

.elemento {
  $colore: red;    // locale — non sovrascrive la globale
  color: $colore;  // red
}

.altro {
  color: $colore;  // blue — usa la globale
}

// !global forza la sovrascrittura globale
.modifica {
  $colore: green !global;
}
.dopo {
  color: $colore;  // green
}

CSS compilato

.elemento {
  color: red;
}
.altro {
  color: blue;
}
.dopo {
  color: green;
}

Default con !default

!default — valori sovrascrivibili (design system)

// _config.scss — valori di default modificabili
$primary:   #4f46e5 !default;
$radius:    8px     !default;

// main.scss — personalizza PRIMA di importare
$primary: #e11d48;   // sovrascrive il default
@use 'config';       // usa $primary = #e11d48, $radius = 8px (default)

💡 Best practice: crea un file _variables.scss (o _tokens.scss) con tutte le variabili del progetto. Il trattino iniziale segnala che il file non deve essere compilato direttamente — viene importato dagli altri.

Sass — Nesting

Il nesting (annidamento) permette di scrivere selettori CSS figli all'interno del selettore genitore, rispecchiando la struttura HTML. Elimina la ripetizione dei selettori e rende il codice più leggibile.

Nesting base

SCSS

nav {
  background: #1e293b;
  padding: 1rem;

  ul {
    list-style: none;
    display: flex;
    gap: 1rem;
  }

  a {
    color: white;
    text-decoration: none;
    padding: .4rem .8rem;
    border-radius: 6px;

    &:hover {
      background: rgba(255,255,255,.15);
    }

    &.active {
      background: #4f46e5;
    }
  }
}

CSS compilato

nav {
  background: #1e293b;
  padding: 1rem;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}
nav a {
  color: white;
  text-decoration: none;
  padding: .4rem .8rem;
  border-radius: 6px;
}
nav a:hover {
  background: rgba(255,255,255,.15);
}
nav a.active {
  background: #4f46e5;
}

L'operatore & (parent selector)

& — selettore padre

SCSS

// & sostituisce il selettore genitore
.btn {
  background: #4f46e5;

  &:hover  { background: #4338ca; }   // .btn:hover
  &:focus  { outline: 2px solid #4f46e5; }
  &:active { transform: scale(.97); }

  &--primary { background: #4f46e5; } // .btn--primary (BEM)
  &--danger  { background: #dc2626; } // .btn--danger
  &--sm      { font-size: .85rem; }   // .btn--sm

  // & dopo: selettore genitore in contesto diverso
  .dark-mode & {
    background: #818cf8;              // .dark-mode .btn
  }
}

CSS compilato

.btn { background: #4f46e5; }
.btn:hover  { background: #4338ca; }
.btn:focus  { outline: 2px solid #4f46e5; }
.btn:active { transform: scale(.97); }
.btn--primary { background: #4f46e5; }
.btn--danger  { background: #dc2626; }
.btn--sm      { font-size: .85rem; }
.dark-mode .btn { background: #818cf8; }

Nesting delle proprietà

Property nesting (namespace)

SCSS

// Raggruppa proprietà con lo stesso prefisso
.testo {
  font: {
    family: 'Inter', sans-serif;
    size: 1rem;
    weight: 600;
    style: italic;
  }
  border: {
    top: 2px solid #e2e8f0;
    bottom: 2px solid #e2e8f0;
  }
}

CSS compilato

.testo {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  font-style: italic;
  border-top: 2px solid #e2e8f0;
  border-bottom: 2px solid #e2e8f0;
}

⚠️ Non annidare troppo! Massimo 3-4 livelli di profondità. Annidamenti profondi generano selettori CSS troppo specifici (alta specificity) e difficili da mantenere. Segui la regola: se lo scrivi in CSS non lo annideresti, in Sass neanche.

Sass — @use, @forward e @import

Sass permette di dividere i tuoi stili in più file (chiamati partial) e combinarli. La regola moderna è @use (sostituisce il vecchio @import). I file partial iniziano con _ per indicare che non devono essere compilati da soli.

@use — la regola moderna

@use — importa un modulo Sass

SCSS

// _colors.scss
$primary: #4f46e5;
$accent:  #f59e0b;
$muted:   #64748b;

// _spacing.scss
$xs: .25rem;
$sm: .5rem;
$md: 1rem;
$lg: 2rem;

// main.scss
@use 'colors';   // accede con colors.$primary
@use 'spacing';

.card {
  color:   colors.$primary;
  padding: spacing.$md;
  margin:  spacing.$lg;
}

// Alias per nomi più corti
@use 'colors' as c;
@use 'spacing' as s;

.btn {
  background: c.$primary;
  padding: s.$sm s.$md;
}

CSS compilato

.card {
  color: #4f46e5;
  padding: 1rem;
  margin: 2rem;
}
.btn {
  background: #4f46e5;
  padding: .5rem 1rem;
}

@forward — esponi moduli

@forward — crea un punto di accesso unico

// _index.scss (barrel file)
@forward 'colors';
@forward 'spacing';
@forward 'typography';
@forward 'mixins';

// In qualsiasi altro file, importi tutto in una riga:
@use 'index' as *;   // oppure: @use '.' as *;

.elemento {
  color: $primary;    // da colors
  padding: $md;       // da spacing
}

Struttura di un progetto Sass (7-1 pattern)

Architettura Sass consigliata

// Struttura 7-1 (7 cartelle + 1 main)
sass/
  abstracts/
    _variables.scss   // variabili, tokens
    _mixins.scss      // mixin riutilizzabili
    _functions.scss   // funzioni custom
    _index.scss       // @forward di tutti gli abstracts

  base/
    _reset.scss       // CSS reset
    _typography.scss  // stili tipografici

  components/
    _button.scss
    _card.scss
    _navbar.scss

  layout/
    _header.scss
    _footer.scss
    _grid.scss

  pages/
    _home.scss
    _about.scss

  themes/
    _dark.scss

  vendors/
    _normalize.scss   // librerie terze

  main.scss           // importa tutto con @use

⚠️ @import è deprecato: dal 2022 @import è ufficialmente deprecato in Sass e verrà rimosso in futuro. Usa sempre @use e @forward nei nuovi progetti. La differenza principale: @use crea uno scope isolato (no variabili globali tra file).

Sass — @mixin

I mixin sono blocchi di stile riutilizzabili che puoi includere in qualsiasi selettore con @include. Supportano argomenti (con valori di default), @content per blocchi annidati e sono il cuore della riusabilità in Sass.

Mixin base

SCSS

// Definizione mixin
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin truncate($width: 100%) {
  width: $width;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// Utilizzo
.hero {
  @include flex-center;
  min-height: 100vh;
}

.card-title {
  @include truncate(250px);
}

.label {
  @include truncate;   // usa il default: 100%
}

CSS compilato

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.card-title {
  width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.label {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Mixin con argomenti multipli e default

Mixin responsive breakpoint

SCSS

// Mixin per media query responsive
@mixin respond-to($bp) {
  @if $bp == sm {
    @media (min-width: 640px)  { @content; }
  } @else if $bp == md {
    @media (min-width: 768px)  { @content; }
  } @else if $bp == lg {
    @media (min-width: 1024px) { @content; }
  } @else if $bp == xl {
    @media (min-width: 1280px) { @content; }
  }
}

// Utilizzo con @content
.container {
  padding: 1rem;

  @include respond-to(md) {
    padding: 2rem;
    max-width: 768px;
  }

  @include respond-to(lg) {
    padding: 3rem;
    max-width: 1024px;
  }
}

CSS compilato

.container {
  padding: 1rem;
}
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    padding: 3rem;
    max-width: 1024px;
  }
}

Mixin avanzati — variadic args

Mixin con argomenti variadic e @content

// Argomenti multipli con ...
@mixin transition($properties...) {
  transition: $properties;
}

.btn {
  @include transition(background .2s, transform .15s, box-shadow .2s);
}

// Mixin che genera utility class
@mixin generate-colors($colors) {
  @each $name, $value in $colors {
    .bg-#{$name}   { background: $value; }
    .text-#{$name} { color: $value; }
    .border-#{$name} { border-color: $value; }
  }
}

$palette: (
  primary: #4f46e5,
  danger:  #dc2626,
  success: #16a34a,
);

@include generate-colors($palette);
// Genera: .bg-primary, .text-primary, .border-primary, .bg-danger, ...

Sass — @extend e %placeholder

@extend permette a un selettore di ereditare le regole di un altro. I placeholder (%nome) sono selettori speciali che esistono solo per essere estesi — non vengono compilati nel CSS se non usati.

@extend base

SCSS

// Classe base
.message {
  padding: 1rem 1.4rem;
  border-radius: 8px;
  font-size: .95rem;
  border-left: 4px solid;
}

// Estensioni
.success {
  @extend .message;
  border-color: #16a34a;
  background:   #f0fdf4;
  color:        #15803d;
}

.error {
  @extend .message;
  border-color: #dc2626;
  background:   #fef2f2;
  color:        #b91c1c;
}

.warning {
  @extend .message;
  border-color: #d97706;
  background:   #fffbeb;
  color:        #92400e;
}

CSS compilato

.message,
.success,
.error,
.warning {
  padding: 1rem 1.4rem;
  border-radius: 8px;
  font-size: .95rem;
  border-left: 4px solid;
}
.success {
  border-color: #16a34a;
  background: #f0fdf4;
  color: #15803d;
}
.error {
  border-color: #dc2626;
  background: #fef2f2;
  color: #b91c1c;
}
.warning {
  border-color: #d97706;
  background: #fffbeb;
  color: #92400e;
}

%placeholder — estensioni silenziose

%placeholder

SCSS

// %placeholder non genera CSS da solo
%card-base {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
  padding: 1.5rem;
}

%visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0,0,0,0);
  overflow: hidden;
}

// Solo quando viene esteso appare nel CSS
.product-card { @extend %card-base; }
.user-card    { @extend %card-base; }

.sr-only { @extend %visually-hidden; }

CSS compilato

.product-card,
.user-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
  padding: 1.5rem;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0,0,0,0);
  overflow: hidden;
}

@extend vs @mixin — quando usare quale

	@extend / %placeholder	@mixin
Quando usare	Selettori che condividono identiche regole	Blocchi con variazione (parametri)
Output CSS	Raggruppa selettori (,)	Duplica le regole in ogni classe
Argomenti	No	Sì
@content	No	Sì
Best for	Alert, tag, badge, stati	Media query, flex helpers, animazioni

Sass — Funzioni String

Sass offre un set di funzioni built-in per le stringhe nel modulo sass:string. Permettono di manipolare testo, costruire selettori dinamici e generare nomi di classi.

Funzioni String principali

@use "sass:string";

// string.quote / string.unquote
$valore: string.quote(rosso);      // "rosso"
$senza:  string.unquote("Inter");  // Inter (senza virgolette)

// string.length — lunghezza in caratteri
$len: string.length("Sass");       // 4

// string.to-upper-case / to-lower-case
$up:  string.to-upper-case("hello");  // "HELLO"
$low: string.to-lower-case("WORLD");  // "world"

// string.slice(str, start, end) — sottostringa (1-based)
$sub: string.slice("Sass CSS", 1, 4); // "Sass"
$end: string.slice("Sass CSS", 6);    // "CSS"

// string.index — trova la posizione
$pos: string.index("Sass CSS", "CSS"); // 6 (o null se non trovato)

// string.insert — inserisce in una posizione
$ins: string.insert("SaCSS", "ss ", 3); // "Sass CSS"

// string.split — divide una stringa (Dart Sass 1.57+)
$parts: string.split("uno,due,tre", ","); // ["uno", "due", "tre"]

Interpolazione di stringhe

Interpolazione #{} — costruisci selettori dinamicamente

SCSS

$tema: "dark";
$componente: "card";

// #{} inserisce un valore nella stringa
.#{$tema}-#{$componente} {
  background: #1e293b;
  color: white;
}

// Genera classi utility dinamicamente
$sizes: (sm: .5rem, md: 1rem, lg: 2rem, xl: 3rem);

@each $name, $value in $sizes {
  .p-#{$name}  { padding: $value; }
  .m-#{$name}  { margin: $value; }
  .gap-#{$name}{ gap: $value; }
}

CSS compilato

.dark-card {
  background: #1e293b;
  color: white;
}
.p-sm  { padding: .5rem; }
.p-md  { padding: 1rem; }
.p-lg  { padding: 2rem; }
.p-xl  { padding: 3rem; }
.m-sm  { margin: .5rem; }
/* ... e così via */

Sass — Funzioni Numeric

Il modulo sass:math fornisce funzioni matematiche e permette operazioni numeriche avanzate. Sass supporta anche gli operatori aritmetici direttamente nelle regole CSS.

Operatori aritmetici in Sass

@use "sass:math";

// Sass supporta +, -, *, /, % con unità compatibili
$base: 16px;
$scale: 1.25;

h1 { font-size: $base * $scale * $scale * $scale; }  // 31.25px
h2 { font-size: $base * $scale * $scale; }            // 25px
h3 { font-size: $base * $scale; }                     // 20px

// Divisione — usa math.div() (non / che è riservato in CSS)
.colonna {
  width: math.div(100%, 3);    // 33.333%
  padding: math.div(2rem, 2);  // 1rem
}

// Percentuali
.progress[data-value="75"] {
  width: math.div(75, 100) * 100%;  // 75%
}

Funzioni math principali

@use "sass:math";

// Arrotondamento
math.ceil(4.2)   // 5
math.floor(4.8)  // 4
math.round(4.5)  // 5
math.clamp(0, 5, 10)  // 5 (min, value, max)

// Valore assoluto e segno
math.abs(-15px)  // 15px
math.sign(-3)    // -1

// Potenza e logaritmo
math.pow(2, 10)  // 1024
math.sqrt(144)   // 12
math.log(100, 10) // 2

// Trigonometria (Dart Sass 1.65+)
math.sin(math.$pi * 0.5)  // 1
math.cos(0deg)             // 1

// Costanti
math.$pi     // 3.1415...
math.$e      // 2.7182...

Generatore di scala tipografica

SCSS

@use "sass:math";

$base: 1rem;
$ratio: 1.25;   // Major Third

// Genera scale tipografica modulare
@for $i from 1 through 6 {
  h#{$i} {
    font-size: $base * math.pow($ratio, 7 - $i);
  }
}

CSS compilato

h1 { font-size: 3.052rem; }
h2 { font-size: 2.441rem; }
h3 { font-size: 1.953rem; }
h4 { font-size: 1.563rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

Sass — Funzioni List

Le liste in Sass sono sequenze di valori separati da spazio o virgola. Il modulo sass:list fornisce funzioni per accedere, modificare e iterare le liste.

Funzioni List principali

@use "sass:list";

$shadow-layers: 0 1px 3px rgba(0,0,0,.12),
                0 1px 2px rgba(0,0,0,.24);

// list.length — numero di elementi
list.length($shadow-layers)  // 2

// list.nth — accedi a un elemento (1-based, o negativo da fine)
list.nth($shadow-layers, 1)  // 0 1px 3px rgba(0,0,0,.12)
list.nth($shadow-layers, -1) // ultimo elemento

// list.index — trova la posizione
$font-stack: 'Inter', 'Roboto', sans-serif;
list.index($font-stack, 'Roboto')  // 2

// list.append — aggiunge un elemento
$new: list.append($font-stack, monospace);  // aggiunge in fondo

// list.join — unisce due liste
$a: 1px 2px;
$b: 3px 4px;
list.join($a, $b)             // 1px 2px 3px 4px
list.join($a, $b, $separator: comma)  // 1px, 2px, 3px, 4px

// list.zip — crea lista di liste
list.zip(a b c, 1 2 3)  // (a 1), (b 2), (c 3)

@each su liste — genera CSS

SCSS

// Lista di bordi per lati
$sides: top right bottom left;

@each $side in $sides {
  .border-#{$side} {
    border-#{$side}: 1px solid #e2e8f0;
  }
}

// Lista di breakpoint
$bp-list: (sm 640px) (md 768px) (lg 1024px) (xl 1280px);

@each $name, $width in $bp-list {
  .container-#{$name} {
    max-width: $width;
    margin: 0 auto;
  }
}

CSS compilato

.border-top    { border-top:    1px solid #e2e8f0; }
.border-right  { border-right:  1px solid #e2e8f0; }
.border-bottom { border-bottom: 1px solid #e2e8f0; }
.border-left   { border-left:   1px solid #e2e8f0; }

.container-sm  { max-width: 640px; margin: 0 auto; }
.container-md  { max-width: 768px; margin: 0 auto; }
.container-lg  { max-width: 1024px; margin: 0 auto; }
.container-xl  { max-width: 1280px; margin: 0 auto; }

Sass — Funzioni Map

Le mappe (map) in Sass sono coppie chiave-valore, simili agli oggetti JavaScript. Sono perfette per design token — colori, spaziature, breakpoint — e per generare classi utility sistematicamente.

Definizione e accesso alle mappe

@use "sass:map";

// Definizione mappa (design tokens)
$colors: (
  primary:   #4f46e5,
  secondary: #06b6d4,
  success:   #16a34a,
  warning:   #d97706,
  danger:    #dc2626,
  muted:     #64748b,
);

$spacing: (
  xs: .25rem,
  sm: .5rem,
  md: 1rem,
  lg: 1.5rem,
  xl: 2rem,
  2xl: 3rem,
);

// Accesso con map.get
$p: map.get($colors, primary);   // #4f46e5
$m: map.get($spacing, md);       // 1rem

// map.has-key — verifica esistenza
map.has-key($colors, "purple")   // false

// map.keys e map.values
map.keys($colors)    // primary secondary success warning danger muted
map.values($spacing) // .25rem .5rem 1rem 1.5rem 2rem 3rem

// map.merge — unisce due mappe
$extra: (accent: #f59e0b, dark: #0f172a);
$all-colors: map.merge($colors, $extra);

// map.remove — rimuove una chiave
$no-muted: map.remove($colors, muted);

Genera utility classes da mappe

SCSS

@use "sass:map";

$colors: (primary:#4f46e5, success:#16a34a, danger:#dc2626);
$spacing: (sm:.5rem, md:1rem, lg:2rem);

// Genera bg-, text- per ogni colore
@each $name, $value in $colors {
  .bg-#{$name}   { background-color: $value; }
  .text-#{$name} { color: $value; }
}

// Genera p-, m- per ogni spaziatura
@each $name, $value in $spacing {
  .p-#{$name} { padding: $value; }
  .m-#{$name} { margin: $value; }
}

CSS compilato

.bg-primary    { background-color: #4f46e5; }
.text-primary  { color: #4f46e5; }
.bg-success    { background-color: #16a34a; }
.text-success  { color: #16a34a; }
.bg-danger     { background-color: #dc2626; }
.text-danger   { color: #dc2626; }
.p-sm { padding: .5rem; }
.p-md { padding: 1rem; }
.p-lg { padding: 2rem; }
/* ... */

map.deep-get — accesso annidato

@use "sass:map";

// Mappa annidata (design system complesso)
$theme: (
  colors: (
    brand: #4f46e5,
    text: (
      primary: #0f172a,
      muted:   #64748b,
    ),
  ),
  spacing: (base: 1rem, scale: 1.25),
);

// Accesso annidato
$brand: map.get(map.get($theme, colors), brand);          // #4f46e5
$muted: map.deep-get($theme, colors, text, muted);         // #64748b (Sass 1.x)

Sass — Funzioni Selector

Il modulo sass:selector permette di analizzare e manipolare selettori CSS in modo programmatico. Utile per creare mixin avanzati che gestiscono la specificity o costruiscono selettori complessi.

Funzioni Selector principali

@use "sass:selector";

// selector.nest — annida selettori
selector.nest(".parent", ".child")
// → .parent .child

selector.nest(".list", "li", "a")
// → .list li a

// selector.append — aggiunge senza spazio (concatena)
selector.append(".btn", ":hover")
// → .btn:hover

selector.append(".icon-", "star", "-lg")
// → .icon-star-lg (non standard, per illustrazione)

// selector.extend — equivalente di @extend
selector.extend(".a, .b", ".b", ".c")
// → .a, .b, .c

// selector.replace — sostituisce un componente
selector.replace("a.disabled", "a", ".link")
// → .link.disabled

// selector.unify — combina due selettori
selector.unify("a", ".active")
// → a.active

// selector.is-superselector — verifica se un sel. è più generico
selector.is-superselector("div", "div.active")  // true
// "div" è un superselector di "div.active

Mixin che usa selector functions

SCSS

@use "sass:selector";

// Mixin che applica stili a :hover e :focus insieme
@mixin on-interact($selector: "&") {
  $hover: selector.append($selector, ":hover");
  $focus: selector.append($selector, ":focus-visible");

  #{$hover}, #{$focus} {
    @content;
  }
}

.btn {
  background: #4f46e5;

  @include on-interact {
    background: #4338ca;
    outline: 2px solid #4f46e5;
  }
}

CSS compilato

.btn {
  background: #4f46e5;
}
.btn:hover,
.btn:focus-visible {
  background: #4338ca;
  outline: 2px solid #4f46e5;
}

Sass — Funzioni Introspection

Le funzioni di introspection del modulo sass:meta permettono di interrogare il tipo di un valore, verificare se una variabile o mixin esiste, e ottenere informazioni sul contesto di compilazione.

Funzioni Introspection principali

@use "sass:meta";

// meta.type-of — tipo del valore
meta.type-of(42)           // number
meta.type-of("ciao")       // string
meta.type-of(true)         // bool
meta.type-of(#ff0000)      // color
meta.type-of(1rem 2rem)    // list
meta.type-of((a: 1))       // map
meta.type-of(null)         // null

// meta.inspect — rappresentazione come stringa
meta.inspect(1rem 2rem 3rem)  // "1rem 2rem 3rem"

// meta.variable-exists — controlla se $var è definita
meta.variable-exists(primary)  // true/false (senza $)

// meta.mixin-exists
meta.mixin-exists(flex-center)  // true/false

// meta.function-exists
meta.function-exists(darken, sass:color)  // true

// meta.module-variables — tutte le variabili di un modulo
@use "sass:color";
meta.module-variables(color)  // mappa con tutte le variabili di sass:color

// meta.content-exists (dentro un mixin)
@mixin wrapper {
  @if meta.content-exists() {
    .wrapper { @content; }
  }
}

@if con type-of — validazione degli argomenti

SCSS

@use "sass:meta";

// Mixin con validazione del tipo
@mixin padding($value) {
  @if meta.type-of($value) != number {
    @error "padding richiede un numero, ricevuto: #{meta.type-of($value)}";
  }
  @if not unitless($value) and unit($value) == "px" {
    // converte px in rem
    padding: $value / 16px * 1rem;
  } @else {
    padding: $value;
  }
}

.card {
  @include padding(24px);   // → 1.5rem
}
.btn {
  @include padding(1rem);   // → 1rem
}

CSS compilato

.card {
  padding: 1.5rem;
}
.btn {
  padding: 1rem;
}

Sass — Funzioni Color

Il modulo sass:color offre funzioni potenti per manipolare i colori — schiarire, scurire, saturare, mescolare, trasparenza — rendendo facile creare scale di colori e variazioni di tema.

Funzioni Color principali

@use "sass:color";

$primary: #4f46e5;

// Schiarisce / scurisce (0-100%)
color.lighten($primary, 20%)   // #8b84ef
color.darken($primary, 15%)    // #302a99

// Aumenta / riduce la saturazione
color.saturate($primary, 20%)
color.desaturate($primary, 20%)

// Opacità (mix con trasparente)
color.transparentize($primary, 0.5)  // rgba(79,70,229, 0.5)
color.opacify($primary, 0.3)

// Imposta o regola i componenti HSL
color.adjust($primary, $lightness: 10%, $saturation: -5%)
color.change($primary, $hue: 200deg)    // cambia solo l'hue
color.scale($primary, $lightness: 20%)  // scala in modo percentuale

// Mescola due colori
color.mix($primary, white, 80%)   // 80% primary + 20% white
color.mix($primary, black, 90%)   // quasi primary, lievemente più scuro

// Complementare / inverso
color.complement($primary)         // colore complementare
color.invert($primary)             // colore invertito

// Canali HSL e RGB
color.hue($primary)         // 243deg
color.saturation($primary)  // 73.7%
color.lightness($primary)   // 58.6%
color.red($primary)         // 79
color.green($primary)       // 70
color.blue($primary)        // 229
color.alpha($primary)       // 1

Genera una color palette automatica

SCSS

@use "sass:color";

$brand: #4f46e5;

// Crea scala di colori automaticamente
$palette: (
  50:  color.mix($brand, white, 10%),
  100: color.mix($brand, white, 20%),
  200: color.mix($brand, white, 40%),
  300: color.mix($brand, white, 60%),
  400: color.mix($brand, white, 80%),
  500: $brand,
  600: color.mix($brand, black, 85%),
  700: color.mix($brand, black, 70%),
  800: color.mix($brand, black, 55%),
  900: color.mix($brand, black, 40%),
);

@each $shade, $value in $palette {
  .brand-#{$shade} { background: $value; }
}

CSS compilato

.brand-50  { background: #eceafe; }
.brand-100 { background: #d9d8fc; }
.brand-200 { background: #b4b1f9; }
.brand-300 { background: #8e8af6; }
.brand-400 { background: #6963ec; }
.brand-500 { background: #4f46e5; }
.brand-600 { background: #433cca; }
.brand-700 { background: #3730a3; }
.brand-800 { background: #2b267e; }
.brand-900 { background: #1e1b58; }

Esercizi Sass

Metti alla prova le tue conoscenze con questi esercizi pratici. Usa SassMeister online oppure un progetto locale con sass --watch.

Esercizio 1 — Design Tokens

🟢 Base

Crea un file _tokens.scss con:

Una mappa $colors con almeno 6 colori (primary, secondary, success, warning, danger, muted)
Una mappa $spacing con 6 valori (xs, sm, md, lg, xl, 2xl)
Variabili per font-family, border-radius e box-shadow
Un loop @each che genera le classi .bg-*, .text-* da $colors
Un loop che genera .p-* e .m-* da $spacing

Esercizio 2 — Componenti con Mixin

🟡 Intermedio

Scrivi un mixin respond-to($bp) con i breakpoint sm/md/lg/xl
Crea un componente .card responsive: 1 colonna su mobile, 2 su md, 3 su lg
Scrivi un mixin button-variant($bg, $text) che genera tutti gli stati (:hover, :focus, :active, :disabled) di un bottone calcolando i colori con le funzioni color
Usa il mixin per creare .btn-primary, .btn-success e .btn-danger

Esercizio 3 — Sistema completo

🔴 Avanzato

Struttura il progetto con l'architettura 7-1: abstracts/, base/, components/, layout/
Usa @use e @forward per un barrel file abstracts/_index.scss
Genera una scala tipografica modulare (ratio 1.25) con un @for loop
Crea un %placeholder per ogni tipo di alert (info, success, warning, error) e usalo con @extend
Implementa un sistema di dark mode: variabili CSS custom generate da mappe Sass, con .dark class toggle

Conclusione — E ora?

Complimenti! 🎉 Hai completato il corso Sass completo e gratuito in italiano: dalla sintassi SCSS e le variabili, al nesting e i moduli, fino ai mixin, @extend, placeholder e alle funzioni built-in per stringhe, numeri, liste, mappe, selettori, introspection e colori.

Sass è uno strumento che migliora immediatamente la qualità del tuo CSS: codice più organizzato, meno ripetizioni, design token centralizzati. Tutti i framework CSS moderni lo usano — imparare Sass significa leggere e contribuire a Bootstrap, Angular Material, Foundation e centinaia di altri progetti.

E ora?

Ora che sai scrivere CSS avanzato con Sass, il passo successivo naturale è Bootstrap — il framework CSS più usato al mondo, scritto interamente in SCSS e configurabile tramite le sue variabili Sass. In alternativa, approfondisci il CSS puro per capire le basi su cui Sass si costruisce.

🎯 La tua sfida finale

Costruisci da zero un design system in Sass: un file _tokens.scss con tutte le variabili, mixin per la tipografia e il layout responsive, palette di colori generata automaticamente con le funzioni color, e componenti (button, card, alert, badge, form) usando @extend e @mixin. Poi usalo per ricreare la UI di un sito che conosci. Pubblicalo su GitHub Pages: sarà una dimostrazione pratica e concreta delle tue competenze frontend avanzate.

🅱️ Continua con Bootstrap 🚀 Torna alle Lezioni

Corso Sass / SCSS in italiano

Introduzione a SASS

Perché usare Sass?

SCSS vs Sass (sintassi indented)

Sass — Introduzione

Come funziona la compilazione

Dove viene usato Sass

Sass — Installazione

Via npm (consigliato)

Compila un file SCSS

Integrazione con Vite (React/Vue)

VS Code — estensioni utili

Sass — Variabili

Scope delle variabili

Default con !default

Sass — Nesting

L'operatore & (parent selector)

Nesting delle proprietà

Sass — @use, @forward e @import

@use — la regola moderna

@forward — esponi moduli

Struttura di un progetto Sass (7-1 pattern)

Sass — @mixin

Mixin con argomenti multipli e default

Mixin avanzati — variadic args

Sass — @extend e %placeholder

%placeholder — estensioni silenziose

@extend vs @mixin — quando usare quale

Sass — Funzioni String

Interpolazione di stringhe

Sass — Funzioni Numeric

Sass — Funzioni List

Sass — Funzioni Map

Sass — Funzioni Selector

Sass — Funzioni Introspection

Sass — Funzioni Color

Esercizi Sass

Esercizio 1 — Design Tokens

Esercizio 2 — Componenti con Mixin

Esercizio 3 — Sistema completo

Conclusione — E ora?

E ora?