Caratteristica #1: Variabili
Varie classi CSS possono contenere la stessa regola o regole in un progetto. Per esempio, abbiamo 20 caselle sulla nostra pagina web con diversi colori di sfondo:
.box-1 {
width: 100px;
height: 100px;
background: red;
}.box-2 {
width: 100px;
height: 100px;
background: yellow;
}....box-20 {
width: 100px;
height: 100px;
background: blue;
}
Poi il nostro cliente cambia idea e vuole caselle più grandi. Quindi ho bisogno di aumentare le proprietà width e height di ogni classe una per una. Questo potrebbe anche essere 50 classi. Nella programmazione della vita reale, questo può essere frustrante. Come ho detto sopra, questo è un esempio di grande sforzo per piccoli cambiamenti.
Come possiamo farlo in modo più efficiente?
Sass fornisce una soluzione: le variabili. Come in altri linguaggi di programmazione, possiamo usare le variabili per memorizzare valori e riutilizzarli in seguito.
Definizione di una variabile:
$variable-name: value;
Tornando all’esempio precedente, se definiamo delle variabili per width & height :
$box-width: 100px;
$box-height: 100px;
in seguito, quando è necessario un cambiamento, dobbiamo solo cambiare i loro valori una volta:
$box-width: 200px; // changed from 100px to 200px
$box-height: 200px; // that's all!.box-1 {
width: $box-width; // using variables now instead of pixels
height: $box-height;
background: red;
}.box-2 {
width: $box-width;
height: $box-height;
background: yellow;
}....box-20 {
width: $box-width;
height: $box-height;
background: blue;
}
CSS stesso supporta anche le variabili ora, ma non funziona in IE & vecchie versioni di altri browser:
Feature #2: Nesting
Il CSS standard non supporta il nesting. Non possiamo scrivere una classe dentro un’altra classe. Come il progetto diventa più grande, questo porta un problema di leggibilità e la struttura non sembra bella.
Per esempio, definiamo un menu di navigazione con link cliccabili in HTML qui sotto:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
HTML supporta il codice annidato. Tuttavia, senza nidificazione, si presentano così in CSS:
Abbiamo dovuto scrivere nav per ogni tag, anche per la pseudo-classe dell’ancora (hover) perché nav è il tag padre di tutti. Sass però supporta la nidificazione:
Qui possiamo scrivere codice meglio strutturato come in HTML. Non abbiamo bisogno di scrivere nav classe dopo classe, il che previene anche la ridondanza
Importante: non è raccomandato annidare classi più profonde di 3 livelli.
Feature #3: Mixins
Abbiamo imparato sopra come usare variabili per le regole CSS. Ma cosa succede se abbiamo bisogno di usare un gruppo di regole insieme? Sass ha una caratteristica chiamata mixins, che ci permette di farlo.
Che cos’è un Mixin?
Mixins sono funzioni Sass che raggruppano le dichiarazioni CSS. Possiamo riutilizzarle in seguito come le variabili.
Possiamo creare un mixin con il comando @ mixin, seguito da un nome:
@mixin my-font {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
}
o possiamo creare un mixin come una funzione e aggiungere anche dei parametri:
$font-color: red;@mixin my-font($font-color) {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: $font-color;
}
Dopo aver creato il mixin, possiamo usarlo in qualsiasi classe con il comando @ include. Così possiamo usare il mixin my-font invece di 4 linee di regole di font ogni volta. Questo approccio semplifica il codice.
p {
@include my-font;
}
Utilizzare i mixin è un buon modo per prevenire la ridondanza del codice.
Feature #4: Imports
Infine, possiamo tagliare i nostri enormi file CSS in pezzi più piccoli con la funzione import di Sass. È molto più facile leggere & mantenere file più piccoli piuttosto che un grande file con linee infinite.
In realtà, anche il CSS ha ora una funzione di importazione. Ma funziona in modo diverso. CSS invia una richiesta HTTP al server ogni volta per importare un file. Sass lo fa senza una richiesta HTTP, che è un approccio più veloce.
Tutto quello che devi fare è importare il tuo file Sass con il comando @ import in un altro file Sass:
// Your main Sass file@import 'file';
@import 'anotherFile';.class {
// Your code
}
Non dobbiamo usare le estensioni .scss nel percorso del file, Sass lo capirà.