Videocorso Sass/SCSS CGFA — Scrivere CSS ordinato, riusabile e veloce da mantenere, con il Sass moderno e i moduli @use

Pubblicato il 30 Ottobre 2026 · Aggiornato il 30 Ottobre 2026 · Autore: CityGraph Napoli (Claudia D'Urso, titolare)

Guarda la presentazione del videocorso Sass/SCSS

Apri le prime 2 lezioni gratis · Scarica il video in MP4

Perché imparare Sass/SCSS

Quando un sito cresce, il CSS diventa un groviglio di regole copiate e incollate. Sass lo rimette in ordine con variabili, mixin e moduli, ed è usato da framework come Bootstrap e da chi personalizza temi WordPress e Shopify. Il corso insegna il Sass di oggi, con @use e @forward, fino al design system completo della pizzeria.

A chi è rivolto

Il corso è pensato per: chi sa già un po' di HTML e CSS e vuole smettere di copiare e incollare: web designer, sviluppatori front-end, chi gestisce siti e temi. Partenza: Base.

• Conoscere le basi di HTML e CSS (selettori, proprietà, classi)
• Un computer Windows, Mac o Linux
• Un editor di testo come Visual Studio Code

Il programma: 10 lezioni in 3 livelli

Circa 9 ore di studio con gli esercizi, in lezioni da 20 a 35 minuti. Le prime 2 sono gratis.

Base: Dal CSS allo SCSS: variabili, nidificazione, mixin e file separati

• Cos'è Sass e il tuo primo file SCSS (20 min, gratis): Capire a cosa serve Sass, installare il compilatore e trasformare un file .scss in CSS.
• Variabili e regole annidate (25 min, gratis): Usare le variabili per colori e misure e scrivere i selettori uno dentro l'altro con il simbolo &.
• Mixin, @include ed @extend (30 min): Riusare blocchi di regole con i mixin e condividere stili tra classi con i selettori segnaposto.
• Dividere il codice con @use (30 min): Spezzare lo stile in più file (partial) e collegarli con @use, capendo i namespace.

Intermedio: Mappe, cicli, funzioni, moduli integrati e design responsive

• Mappe, liste, cicli e condizioni (35 min): Generare molte classi CSS da un elenco di dati con @each, @for e @if.
• Funzioni e moduli integrati (35 min): Scrivere funzioni con @function e usare i moduli sass:math, sass:map e sass:color.
• Responsive con @content e le media query (30 min): Creare un mixin per i breakpoint e scrivere la versione mobile e desktop nello stesso blocco.

Avanzato: Architettura, design token, temi e strumenti di produzione

• Architettura dei moduli: @forward e configurazione (35 min): Organizzare un progetto grande con @forward, moduli configurabili con @use with e cartelle con file indice.
• Design token, variabili CSS e temi chiaro/scuro (35 min): Unire Sass e variabili CSS native per creare un tema che cambia anche dopo la compilazione.
• Strumenti di produzione, errori e novità (35 min): Compilare per la pubblicazione, usare le source map, segnalare errori con @error e @warn e prepararsi alle novità di Sass.

Il progetto finale: Il design system della pizzeria

Costruisci il foglio di stile modulare di un sito di una pizzeria napoletana: variabili e temi, mixin per bottoni e breakpoint, funzione per le misure in rem, classi di spaziatura generate con i cicli e una versione compressa per la pubblicazione.

1. Crea le cartelle abstracts e componenti, più un file main.scss.
2. In abstracts/_variabili.scss scrivi la mappa dei colori e dei breakpoint.
3. In abstracts/_mixin.scss scrivi i mixin bottone e da (breakpoint con @content) e la funzione px-in-rem.
4. Crea abstracts/_index.scss con @forward per esporre tutto insieme.
5. In componenti/_bottone.scss e _scheda.scss usa @use per caricare abstracts.
6. In main.scss genera le variabili CSS del tema e le classi di spaziatura con @each o @for.
7. Compila con sass --watch durante il lavoro e con --style=compressed per la versione finale.

Cosa ti serve

• Dart Sass (versione recente): È l'implementazione ufficiale di Sass. Si installa con npm install -g sass (serve Node.js da nodejs.org) oppure si scarica il programma già pronto dalla pagina dei rilasci di Sass su GitHub
• Visual Studio Code: Editor gratuito da code.visualstudio.com; l'estensione "Live Sass Compiler" compila mentre salvi
• Sass Playground (Try Sass): Prova online gratuita sul sito ufficiale sass-lang.com, la pagina "Playground" (Try Sass), senza installare niente

A cosa ti serve dopo il corso

• Sviluppatore front-end e web designer
• Personalizzazione di temi WordPress, Shopify e di siti su misura
• Design system e librerie di componenti per aziende
• Manutenzione di siti grandi con centinaia di regole CSS
• Framework come Bootstrap, che usano Sass

Come si studia

• Video breve per ogni lezione, con i sottotitoli e il testo del video da leggere.
• Spiegazione scritta con esempi italiani (prezzi in euro, negozi, città) e codice da copiare con un tocco.
• Esercizio con la soluzione, appunti personali e quiz di tre domande per segnare la lezione come fatta.
• Esame finale di 15 domande (si supera con il 75%) e attestato stampabile con codice di controllo verificabile.
• App installabile su PC, tablet e telefono: niente account, i progressi restano sul dispositivo e si salvano con il backup.

Per privati, scuole e aziende

• Singolo corso: per chi vuole imparare un linguaggio, con tutte le lezioni, il progetto finale, l'esame e l'attestato.
• Tutti i corsi: l'accesso a tutto il catalogo CGFA Academy, per passare da un linguaggio all'altro quando vuoi.
• Aziende: formazione dei dipendenti su programmazione, dati, automazione e scrittura, con gli attestati nel registro.
• Scuole e centri di formazione: licenza per sede, per le classi e i laboratori, con la verifica dei codici degli attestati.
• White label: l'Academy con il nome, i colori e il dominio di chi la offre, per enti di formazione, agenzie e consulenti.

Le condizioni si concordano in base alle persone da formare: scrivici con Richiedi maggiori informazioni o su WhatsApp.

L'attestato è un attestato di frequenza con codice di controllo, non un titolo di studio né una certificazione pubblica. I programmi indicati nel corso sono gratuiti o già presenti nel computer, salvo dove è scritto diversamente.