Sass è un linguaggio usato per semplificare lo sviluppo Frontend, in particolare la scrittura di file CSS.
Si tratta di un linguaggio con una sintassi più semplificata rispetto al CSS, che permette una scrittura più naturale e meno pesante dei file di stile per il tuo sito. Al giorno d’oggi infatti i file CSS, insieme ai nostri siti diventano sempre più grandi, questo può renderli difficili da mantenere e da modificare. ma non ti preoccupare, Sass rende questo processo più facile.
Se già sai che cos'è Sass , puoi usare questa guida scritta per Mac OS X, per vedere come installarlo e come usarlo.
Come funziona?
Il codice Sass viene scritto dal web developer, questo codice viene in seguito trasformato da un software esterno in codice CSS. Ma perché utilizzare un nuovo linguaggio di programmazione quando puoi semplicemente usare il vecchio CSS?
La risposta è semplice: Il linguaggio Sass porta molti vantaggi al programmatore, ed io personalmente dopo aver imparato ad usarlo non ne posso più fare a meno. Vediamo insieme alcuni di questi vantaggi:
Il supporto delle variabili:
Meno codice === developer felice :)
Sass ti permette di usufruire di variabili per salvare le tue regole CSS più usate, questo significa niente più ripetizioni di dichiarazioni di fonts, colori, grandezze, etc. Infatti con Sass puoi dichiarare tutte le tue variabili all’inizio del tuo file e queste saranno accessibili sempre nel tuo codice: come nell’esempio:
$colore-link: #0044fe; nav a {color: $colore-link; }
Supporto dell' indentazione:
Sass ti permette di indentare il tuo codice in modo da limitare lo scope della tua regola in un determinato spazio. Per esempio il codice:
.nav{
ul{
float: left;
}
}Assegna la regola solamente agli elementi <ul> contenuti dentro ad elementi <nav>
Partials e Imports:
Sass ti permette di creare porzioni di codice che possono essere riutilizzati, portandoti alla creazione di un codice più modulare, quindi più riutilizzabile.
Per creare un partial (modulo), basta salvare un determinato set di regole in un file Sass, questo potrà essere importato in qualsiasi file tramite il comando @import.
Mixins:
Con i Mixins puoi dichiarare un set di regole che vuoi applicare a più elementi html, e quando hai bisogno di usarlo basta importarlo con il comando @include.
I Mixins sono vere e proprie funzioni, infatti possono anche accettare parametri di input, che poi puoi usare per creare regole simili ma con valori diversi
per esempio:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
Ereditarietà:
Se hai familiarità con il concetto di Programmazione orientata ad oggetti allora sicuramente sai che cos’è l’ereditarietà. Questo concetto può essere usato anche nel codice Sass. Infatti puoi assegnare o ereditare tutte le regole che sono applicate ad un certo elemento html ad un altro elemento, modificando o aggiungendo alcune regole in più. Vediamo un esempio:
.tabella{border: 1px solid #fff;border-radius: 5px:backgorund: #333; } .menu{@extends .tabella;color: #000; } .eventi{@extends .tabella;color: #34e34a; }
Operatori matematici:
Infine Sass ti permette di eseguire operazioni matematiche, usate nei più comuni linguaggi di programmazione, come: +, -, *, /, etc.
Questo può risultare utile soprattutto quando stai scrivendo regole per le dimensioni dei tuoi elementi html. Per esempio se vuoi avere tutti i tuoi elementi html con delle dimensioni in scala, potresti dichiarare una variabile “scale” e poi dividere i tuoi elementi per la scala:
$scala: 1.5; $larghezza: 1000px; .svg{width: $larghezza / $scala; }
Per vedere come funziona Sass puoi sperimentare con questo convertitore Sass to CSS.
