Videocorso Sass/SCSS CGFA

Scrivere CSS ordinato, riusabile e veloce da mantenere, con il Sass moderno e i moduli @use

Partenza: Base
9 ore con gli esercizi
10 lezioni in 3 livelli
2 lezioni gratis

Inizia la prima lezione Sblocca il corso

A chi serve

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

Cosa serve per iniziare

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

Cosa installare

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 CodeEditor 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

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

Programma del corso

10 lezioni in 3 livelli. Ogni lezione: video, spiegazione, codice da copiare o provare, esercizio con soluzione e quiz.

Base

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

1Cos'è Sass e il tuo primo file SCSSCapire a cosa serve Sass, installare il compilatore e trasformare un file .scss in CSS.Gratis20 min 2Variabili e regole annidateUsare le variabili per colori e misure e scrivere i selettori uno dentro l'altro con il simbolo &.Gratis25 min 3Mixin, @include ed @extendRiusare blocchi di regole con i mixin e condividere stili tra classi con i selettori segnaposto.30 min 4Dividere il codice con @useSpezzare lo stile in più file (partial) e collegarli con @use, capendo i namespace.30 min

Intermedio

Mappe, cicli, funzioni, moduli integrati e design responsive

1Mappe, liste, cicli e condizioniGenerare molte classi CSS da un elenco di dati con @each, @for e @if.35 min 2Funzioni e moduli integratiScrivere funzioni con @function e usare i moduli sass:math, sass:map e sass:color.35 min 3Responsive con @content e le media queryCreare un mixin per i breakpoint e scrivere la versione mobile e desktop nello stesso blocco.30 min

Avanzato

Architettura, design token, temi e strumenti di produzione

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

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.

I passi

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

Esame e attestato

Alla fine del corso fai l'esame: 15 domande, serve il 75% di risposte giuste. Superato l'esame ottieni l'attestato stampabile con nome, ore, punteggio e un codice di controllo che chiunque può verificare.

Vai all'esame

Glossario di Sass/SCSS

Sass: Un linguaggio che si compila in CSS e aggiunge variabili, funzioni e moduli.
SCSS: La sintassi di Sass simile al CSS, con graffe e punto e virgola.
Compilatore: Il programma che trasforma i file SCSS in CSS per il browser.
Variabile: Un valore con un nome che inizia con il dollaro, riusabile in tutto il file.
Nidificazione: Scrivere una regola dentro un'altra per evitare di ripetere i selettori.
Mixin: Un gruppo di regole con nome, che può ricevere parametri, da inserire con @include.
Partial: Un file SCSS che inizia con il trattino basso e viene incluso in altri file.
Modulo: Un file Sass caricato con @use, con il suo namespace e i suoi nomi.
Mappa: Un elenco di coppie chiave e valore, simile a un dizionario.
Interpolazione: La forma #{...} che inserisce il valore di una variabile in un nome o in un selettore.
Design token: Un valore di stile con nome, come un colore o uno spazio, usato in tutto il progetto.
Source map: Un file che collega il CSS generato al codice SCSS originale per il debug.

Le prime 2 lezioni sono gratis

Per il corso completo, scuole e aziende: chiedi le condizioni.

Inizia ora Richiedi maggiori informazioni