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. Se vuoi un percorso guidato personalizzato, posso seguirti con ripetizioni di informatica in presenza a Roma.

🎯 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 ai Corsi 📅 Prenota una lezione

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?