Cos'è Sass? Scopri come utilizzare questo linguaggio di estensione CSS

Se hai problemi con file CSS ingombranti e disordinati, non cercare oltre Sass e la sua magia di elaborazione.

I fogli di stile sintatticamente fantastici (Sass) sono un popolare linguaggio di estensione CSS. La lingua esiste da circa 15 anni. Funziona bene con ogni versione di CSS, rendendolo compatibile con ogni libreria e framework CSS, da Bootstrap a Foundation.

Il linguaggio ti consente di scrivere codice Sass e quindi compilare quel codice in CSS. Il vantaggio di utilizzare Sass invece dei semplici CSS è che fornisce funzionalità aggiuntive che attualmente sono al di fuori dell'ambito dei CSS.

In questo tutorial imparerai come utilizzare Sass e le sue funzionalità più importanti.

Installazione di Sass

Esistono diversi modi per utilizzare Sass sul tuo dispositivo. Questi includono l'esecuzione di un'applicazione (come LiveReload o Scout-App), il download di Sass da GitHub o l'installazione utilizzando npm.

Installazione di Sass con npm

Per installare Sass utilizzando npm dovrai installare NodeJS e npm sul tuo dispositivo. Quindi dovrai creare un file package.json (che è una buona pratica quando installi qualsiasi pacchetto npm nei tuoi progetti). Puoi creare un file package.json di base nella directory del tuo progetto con il seguente comando da terminale:

npm init -y

L'esecuzione di questo comando genererà un file package.json con il seguente contenuto:

{
 "name": "my_app",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC"
}

Il file package.json è importante perché serve come configurazione per il tuo progetto. Ogni volta che installi un nuovo pacchetto npm, il file package.json lo rifletterà.

Ora puoi installare Sass inserendo il seguente comando nel tuo terminale:

npm install sass

Questo comando aggiornerà il file package.json creando un nuovo campo di dipendenza, che conterrà il nuovo pacchetto Sass. Genererà inoltre un nuovo file package-lock.json e installerà sass (più le dipendenze) in una directory node_modules.

I diversi tipi di file Sass

Un file Sass può avere una delle due estensioni, .sass o .scss. La differenza principale tra loro è che il file .scss utilizza parentesi graffe e punto e virgola (molto simile ai CSS), mentre il file .sass struttura i CSS utilizzando il rientro (molto simile a Python) . Alcuni sviluppatori preferiscono utilizzare il file .scss poiché la sua struttura è più vicina ai CSS.

Un esempio di file .scss

$primary-color: blue;
body {
    color: $primary-color;
   p {
       color: red;
   }
}

Un esempio di file .sass

$primary-color: blue
body
    color: $primary-color
   p
       color: red

Compilazione di un file Sass in CSS

Puoi compilare un singolo file Sass utilizzando il programma a riga di comando sass:

sass file.scss > file.css

Puoi anche eseguire sass su tutti i file all'interno di una directory specifica:

sass scss:dist/css/

Questo comando compila tutti i file Sass nella directory scss e memorizza i file risultanti in dist/css.

Se utilizzi npm, puoi impostare una comoda scorciatoia per la compilazione sass utilizzando il campo script nel tuo file package.json:

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "sass": "sass --watch scss:dist/css/"
 },

Questa configurazione utilizza l'opzione --watch. Mantiene Sass in esecuzione e garantisce la ricompilazione di tali file ogni volta che cambiano. Per ogni file, sass genererà un file .css e un file .css.map.

Per eseguire lo script Sass sopra dovrai eseguire il seguente comando nel tuo terminale:

npm run sass

L'esecuzione di quel comando genererà un output simile a questo:

> my_app@1.0.0 sass C:\Users\kadeisha\Documents\my_app
> sass --watch scss:dist/css/
Compiled scss\main.scss to dist\css\main.css.
Sass is watching for changes. Press Ctrl-C to stop.

Variabili di Sass

Oggi puoi creare variabili nei CSS, ma 15 anni fa le variabili CSS non esistevano, quindi il supporto di Sass per loro era prezioso. Le variabili Sass funzionano più o meno allo stesso modo delle variabili CSS. Memorizzano i valori (come i colori) che intendi utilizzare in un file CSS. Uno dei principali vantaggi delle variabili è che consentono di aggiornare molte occorrenze di un valore modificandolo in un unico posto.

Ogni variabile Sass inizia con il simbolo del dollaro, seguito da qualsiasi combinazione di caratteri. Prova a rendere le tue variabili descrittive, come nell'esempio $primary-color sopra. È importante notare che una variabile Sass non viene compilata in variabili CSS. Ad esempio, questo file .scss:

$primary-color: blue;

body {
   color: $primary-color;
}

Verrà compilato nel seguente CSS:

body {
    color: blue;
}

Come puoi vedere dal file sopra non ci sono variabili CSS. Il vantaggio delle variabili è che qualsiasi modifica apportata al file Sass aggiornerà il file CSS corrispondente.

Sass Mixins

Se hai una proprietà che desideri utilizzare più volte nel corso del tuo progetto, allora una variabile è fantastica. Ma se hai un gruppo di proprietà che desideri utilizzare come unità, un mixin farà al caso tuo.

Ogni mixin inizia con la parola chiave @mixin, seguita dal nome che vuoi assegnare al mixin. Hai la possibilità di passare variabili al mixin come parametri e utilizzare tali variabili all'interno del corpo del mixin, più o meno allo stesso modo di una funzione.

Utilizzando un Mixin

@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   background-color: $primary-color;
   color: $secondary-color;
}

#home {
   @include light-theme(blue);
}

La prima cosa che potresti notare nel codice sopra è che il mixin accetta due argomenti. Puoi assegnare valori predefiniti agli argomenti e sovrascriverli quando li includi.

Dopo aver creato il tuo mixin, puoi utilizzarlo in qualsiasi sezione del tuo sito web utilizzando la parola chiave @include seguita dal nome del mixin.

La compilazione del codice Sass sopra genererà il seguente codice CSS nel file di destinazione:

#home {
 font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 background-color: blue;
 color: #2c2c2c;
}

Funzioni Sass

A parte le diverse parole chiave, la differenza principale tra una funzione e un mixin è che una funzione deve restituire qualcosa. È possibile utilizzare le funzioni Sass per calcolare valori o eseguire operazioni.

@function add-numbers($num-one, $num-two){
   $sum: 0;
   $sum: $num-one + $num-two;
   @return $sum 
}

Questa funzione sopra accetta due numeri e restituisce la loro somma. Le funzioni Sass possono contenere anche istruzioni if, cicli for e altre istruzioni del flusso di controllo.

Moduli Sass

Se dovessi includere tutte le variabili, i mixin e le funzioni nello stesso file, avresti un file Sass enorme quando crei applicazioni di grandi dimensioni. I moduli forniscono un modo per dividere file di grandi dimensioni in file più piccoli che Sass combina durante la compilazione. Ad esempio, puoi avere un modulo funzione e un modulo mixin, tutto ciò che devi ricordare è la parola chiave @use.

Ecco un esempio che mostra come separare il mixin precedente in un proprio file:

Il file mixins.scss

@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   background-color: $primary-color;
   color: $secondary-color;
}

Il file main.scss

@use 'mixins';
#home{
   @include mixins.light-theme;
}

Per importare e utilizzare un file esterno come modulo, dovrai utilizzare la parola chiave @use per importarlo. Quindi, per utilizzare un mixin specifico dal file importato, anteporre al nome del mixin specifico il nome del file seguito da un punto. La compilazione dei file sopra genererà il seguente codice CSS:

#home {
 font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 background-color: white;
 color: #2c2c2c;
}

Usa Sass per estendere e organizzare il tuo CSS

Sass è un'estensione della sintassi dei CSS. Ti consente di semplificare i tuoi fogli di stile e gestirli in modo più efficiente. Ma dovrai comunque padroneggiare i CSS e i principi del web design per creare progetti efficaci.

Questo articolo ti insegna come installare e utilizzare Sass. Hai imparato come creare variabili, mixin, funzioni e moduli Sass. Ora tutto ciò che ti resta da fare è creare un documento HTML e guardare il tuo codice Sass prendere vita.