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

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 dell'utilizzo di Sass invece del semplice CSS è che fornisce funzionalità aggiuntive che attualmente non rientrano nell'ambito di CSS.

In questo tutorial imparerai come usare Sass e le sue caratteristiche più importanti.

Installazione Sass

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

Installazione di Sass con npm

Per installare Sass usando npm dovrai farlo installa NodeJS e npm sul tuo dispositivo. Quindi dovrai creare un pacchetto.json file (che è una buona pratica quando si installa qualsiasi pacchetto npm nei propri progetti). Puoi creare una base

pacchetto.json file nella directory del progetto con il seguente comando da terminale:

npm init -y

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

{
 "nome": "mia_app",
 "versione": "1.0.0",
 "descrizione": "",
 "main": "index.js",
 "script": {
 "test": "echo \"Errore: nessun test specificato\" && uscita 1"
 },
 "parole chiave": [],
 "autore": "",
 "licenza": "ISC"
}

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

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

npm install sass

Questo comando aggiornerà il pacchetto.json file creando un nuovo campo di dipendenza, che conterrà il nuovo pacchetto Sass. Genererà anche un nuovo pacchetto-lock.json file e installa sass (più dipendenze) in a nodi_moduli directory.

I diversi tipi di file Sass

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

Un esempio di file .scss

$ colore primario: blu;
corpo {
 colore: $ colore primario;
 P {
 colore rosso;
 }
}

Un esempio di file .sass

$ colore primario: blu
corpo
 colore: $ colore primario
 P
 colore rosso

Compilazione di un file Sass in CSS

Puoi compilare un singolo file Sass usando il sasso programma da riga di comando:

sass file.scss > file.css

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

sass scss: dist/css/

Quel comando compila tutti i file Sass all'interno del file scs directory e memorizza i file risultanti in dist/css.

Se stai usando npm, puoi impostare una comoda scorciatoia per la compilazione sass usando il file script campo nel tuo pacchetto.json file:

"script": {
 "test": "echo \"Errore: nessun test specificato\" && uscita 1",
 "sass": "sass --watch scss: dist/css/"
 },

Questa configurazione utilizza il --guarda opzione. Mantiene in esecuzione sass e assicura che ricompili i file ogni volta che cambiano. Per ogni file, sass genererà a .css e un .css.map file.

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

npm esegui sass

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

> [email protected] sass C:\Utenti\kadeisha\Documenti\mia_app
> sass --watch scss: dist/css/
scss\main.scss compilato in dist\css\main.css.
Sass sta aspettando i cambiamenti. Premi Ctrl-C per interrompere.

Variabili Sass

Oggi puoi creare variabili in CSS, ma 15 anni fa le variabili CSS non esistevano, quindi il supporto di Sass per esse è stato 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'unica posizione.

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

$ colore primario: blu;
corpo {
 colore: $ colore primario;
}

Verrà compilato nel seguente CSS:

corpo {
 colore blu;
}

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 Mixin

Se hai una proprietà che desideri utilizzare più volte durante il tuo progetto, una variabile è ottima. Ma se hai un gruppo di proprietà che desideri utilizzare come unità, un mixin farà il trucco.

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

Usando un Mixin

@mixin light-theme($colore-primario: bianco, $colore-secondario: #2c2c2c) {
 famiglia di caratteri: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 colore di sfondo: $ colore primario;
 colore: $colore secondario;
}
#casa {
 @include il tema della luce (blu);
}

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

Dopo aver creato il tuo mixin, puoi usarlo in qualsiasi sezione del tuo sito web usando il @includere parola chiave seguita dal nome del mixin.

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

#casa {
 famiglia di caratteri: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 colore di sfondo: blu;
 colore: #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.

@funzione numeri-addizione($num-uno, $num-due){
 $ somma: 0;
 $somma: $num-uno + $num-due;
 @ritorno $ somma 
}

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

Moduli Sass

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

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

Il file mixins.scss

@mixin light-theme($colore-primario: bianco, $colore-secondario: #2c2c2c) {
 famiglia di caratteri: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 colore di sfondo: $ colore primario;
 colore: $colore secondario;
}

Il file main.scss

@usa 'mixin';
#casa{
 @include mixins.light-theme;
}

Per importare e utilizzare un file esterno come modulo, dovrai utilizzare il file @utilizzo parola chiave 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:

#casa {
 famiglia di caratteri: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 colore di sfondo: bianco;
 colore: #2c2c2c;
}

Usa Sass per estendere e organizzare i tuoi CSS

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

Questo articolo ti insegna come installare e utilizzare Sass. Hai imparato a creare variabili, mixin, funzioni e moduli Sass. Ora non ti resta che creare un documento HTML e guardare il tuo codice Sass prendere vita.

8 suggerimenti e trucchi CSS essenziali che ogni sviluppatore dovrebbe conoscere

Leggi Avanti

Circa l'autore