A volte risulta difficile scrivere tutto il codice in un unico file. Sass consente di suddividere il codice in diversi file e cartelle. Questo semplifica la manutenzione e la ristrutturazione del codice.

cartella sass

Il primo passo consiste nel creare la cartella sass nella root del progetto. In questo modo si comunica al compilatore che nel progetto viene utilizzato sass.

organizzazione della cartella sass

Nella cartella sass:

1. Si crea il file main.scss. È il file principale per il compilatore. Tutti i frammenti verranno collegati a questo file tramite la direttiva @import;
2. Si creano diverse cartelle per i partials di sass (ad esempio, la cartella utilities per le variabili, la cartella components per gli stili ricorrenti di alcuni elementi, la cartella base per gli stili globali e il reset del comportamento predefinito degli elementi, e la cartella layouts per gli stili non ricorrenti).

partials

Ora è possibile aggiungere file e scrivere codice sass per applicare gli stili agli elementi. Per mantenere la struttura, si crea un file per ciascuna funzionalità. Il nome del file deve iniziare con il carattere di sottolineatura (_). Per il compilatore, questo indica che non si tratta del file principale, ma di un partial.

Tutta la struttura è pronta. È possibile importare tutti i file nel file main.scss tramite la direttiva @import. L'ordine è fondamentale. Ad esempio, se si desidera utilizzare alcune variabili dal file _variables.scss nel file _button.scss, è necessario che l'importazione del file _variables.scss sia posizionata prima dell'importazione del file _button.scss all'interno di main.scss.

La sintassi per importare un file è la seguente. Si utilizza @import e le doppie virgolette ("") per specificare il percorso corretto del file.

@import "path";

Il contenuto risultante nel file main.scss sarà il seguente:

@import "utilities/variables";
@import "base/resetting";
@import "components/button";
@import "components/link";
@import "layouts/about-section";
@import "layouts/contacts-section";

Nota

Abbiamo considerato le basi del preprocessore sass che ci permettono di utilizzarlo nei progetti. Tuttavia, qualsiasi preprocessore offre una vasta gamma di funzionalità diverse. Coprire tutte queste funzionalità esula dagli obiettivi di questo corso.