CSS Academy · Lezione

Variabili, nesting e partial

Utilizzi le variabili Sass per valori riutilizzabili, annidi i selettori per migliorare la leggibilità e divida il codice in partial.

Variabili, nesting e partial è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Che cos'è Sass?

Sass (Syntactically Awesome Stylesheets) è un preprocessore CSS che estende CSS con variabili, annidamento, mixin, funzioni e altro. I file Sass vengono compilati in CSS standard.

Due sintassi di Sass

Sass dispone di due formati di file:

.scss — sintassi compatibile con CSS e da esso estesa, la più utilizzata
.sass — sintassi basata sull'indentazione, senza parentesi graffe né punti e virgola

Questo corso tratta SCSS.

Variabili Sass

Le variabili Sass utilizzano il prefisso $. Vengono risolte al momento della compilazione: a differenza delle proprietà personalizzate CSS, non sono dinamiche nel browser.

<button class="button">Sass Variables</button>

Variabili Sass e proprietà personalizzate CSS

Differenze principali:

Variabili Sass: vengono risolte al momento della compilazione, non sono presenti nel browser e non possono cambiare durante l'esecuzione
Proprietà personalizzate CSS: sono dinamiche nel browser, possono essere modificate da JavaScript e tengono conto della cascata

Pratica moderna: utilizzi entrambe. Le variabili Sass sono adatte alla logica in fase di compilazione; le proprietà personalizzate CSS alla tematizzazione durante l'esecuzione.

Annidamento

Sass consente di annidare i selettori l'uno dentro l'altro, rispecchiando la struttura HTML. L'output compilato utilizza selettori discendenti.

<div class="card">
    <div class="card-title">Card title</div>
    <div class="card-body">Card body text</div>
  </div>

Selettore genitore &

& fa riferimento al selettore genitore e consente di creare pattern simili a BEM e selettori di stato:

<button class="button">Button</button>
  <button class="button active">Active state (font-weight: bold)</button>
  <button class="button--primary">BEM modifier: button--primary</button>
  <span class="button__icon">&#128279;</span> BEM element: button__icon

Avvertenza sulla profondità dell'annidamento

Eviti di annidare oltre 3 livelli. Un annidamento profondo produce selettori eccessivamente specifici e rende il CSS fragile. Se si trova ad annidare in profondità, probabilmente l'architettura CSS deve essere sottoposta a refactoring.

File parziali Sass

Un partial è un file Sass il cui nome inizia con un carattere di sottolineatura, come _card.scss. I partial non vengono compilati autonomamente: devono essere importati in un altro file. In questo modo si evita di generare file CSS di output indesiderati.

@use per le importazioni

Il Sass moderno utilizza @use per importare i partial. Offre uno spazio dei nomi che evita i conflitti tra variabili:

<h2 class="heading">Namespaced heading (t.$primary-color)</h2>

@forward per le librerie

@forward riesporta i membri di un modulo, rendendoli utilizzabili dai file che importano la libreria:

<span class="badge">Forwarded token (lib.$primary-color)</span>

@import legacy (deprecato)

La direttiva @import precedente è deprecata in Dart Sass. Esegua la migrazione a @use e @forward per ottenere una gestione migliore degli spazi dei nomi e prestazioni superiori.

Verifica rapida

Quale selettore CSS genera Sass dall'annidamento .nav { .link { color: white; } }?

Riepilogo

Le variabili Sass, come $name, vengono risolte al momento della compilazione. L'annidamento rispecchia la struttura HTML, ma eviti di superare 3 livelli. & fa riferimento al selettore genitore per pseudo-classi, stati e modificatori BEM. I partial, come _file.scss, vengono importati e non compilati direttamente. Utilizzi @use, non @import, per il caricamento moderno dei moduli Sass.

Domande Frequenti

La lezione «Variabili, nesting e partial» è gratuita?

Sì — il testo completo di «Variabili, nesting e partial» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Variabili, nesting e partial»?

Utilizzi le variabili Sass per valori riutilizzabili, annidi i selettori per migliorare la leggibilità e divida il codice in partial. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Variabili, nesting e partial»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a CSS Academy