Introduzione a Sass

Cose che dovresti sapere

Prima di continuare, dovresti avere una conoscenza di base dei seguenti contenuti:

  • HTML
  • CSS

Se desideri imparare questi argomenti prima, puoi farlo nel nostro Pagina principale Visita questi tutorial su

Cos'è Sass?

  • Sass si riferisce a Syntactically Awesome Stylesheet (tabella di stile con una fantastica sintassi)
  • Sass è un'estensione di CSS
  • Sass è un preprocessore CSS
  • Sass è completamente compatibile con tutte le versioni di CSS
  • Sass riduce la ripetizione del CSS, risparmiando tempo
  • Sass è stato progettato da Hampton Catlin e sviluppato da Natalie Weizenbaum nel 2006
  • Sass può essere scaricato e utilizzato gratuitamente

Perché utilizzare Sass?

Le tabelle di stile diventano sempre più grandi, più complesse e più difficili da mantenere. Questo è il punto in cui i preprocessori CSS possono offrire una mano d'aiuto.

Sass ti permette di utilizzare caratteristiche non esistenti in CSS, come variabili, regole annidate, mixin, importazioni, ereditarietà, funzioni integrate e altre funzionalità.

Un esempio semplice e utile di Sass

Supponiamo di avere un sito con tre colori principali:

#a2b9bc
#b2ad7f
#878f99

Quante volte devi digitare questi valori HEX? Molte volte. E se lo stesso colore cambia?

Puoi scrivere il seguente codice in Sass, invece di digitare più volte i valori sopra:

Esempio Sass

/* Definire variabili per il colore originale */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* Usa le variabili */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

Quindi, quando si utilizza Sass, se il colore originale cambia, è sufficiente modificarlo in un solo luogo.

Come funziona Sass?

Il browser non capisce il codice Sass. Pertanto, hai bisogno di un preprocessore Sass per convertire il codice Sass in CSS standard.

Questo processo si chiama traduzione (transpiling). Quindi, devi fornire il codice Sass al traduttore (un programma) e ottenere il codice CSS.

Suggerimento:Traduzione è un termine utilizzato per convertire o tradurre il codice sorgente scritto in una lingua in un'altra lingua.

Tipo di file Sass

L'estensione dei file dei file Sass è ".scss".

Commenti Sass

Sass supporta i commenti CSS standard /* commento */Inoltre, supporta i commenti inline // commento:

Esempio Sass

/* Definisci i colori principali */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* Usa le variabili */
.main-header {
  background-color: $primary_1; // Puoi aggiungere commenti inline qui
}