Abbracciare Sass: perché dovresti smettere di usare Vanilla CSS

Quando ho sentito parlare per la prima volta di Sass e di altri preprocessori CSS, i miei pensieri esatti non erano del tutto entusiasti. "Perché abbiamo bisogno di un altro strumento per qualcosa che funzioni già magnificamente come CSS?". “Non lo userò”. “Il mio CSS è abbastanza ordinato da non averne bisogno”. “Un preprocessore è per chi non sa scrivere CSS, se sai scrivere CSS non avrai bisogno di un preprocessore”. “Dopo tutto, i processori sono per le persone che non sanno come scrivere CSS. Se lo facessero, non avrebbero bisogno di un preprocessore”. E in realtà li ho evitati per un po', finché non sono stato costretto a usarlo in diversi progetti.

Non mi rendevo conto di quanto mi piacesse lavorare con Sass fino a poco tempo fa, quando ho dovuto tornare al CSS vanigliato in un progetto. Durante quel periodo, ho imparato così tanto che ho deciso di lodare Sass e rendere questo un mondo migliore e renderti una persona più felice!

Perché usare comunque Sass?

Organizzazione: @import

Questo progetto che ho appena citato, un grande sito di e-commerce, aveva un unico file CSS con 7184 righe di dichiarazioni di stile non compresse. Sì, avete letto bene: settemilacentottantaquattro righe di CSS. Sono sicuro che questo non è il più grande front-end di file CSS che gli sviluppatori di file CSS hanno dovuto gestire nel settore, ma era abbastanza grande da essere un disastro completo.

Questo è il primo motivo per cui hai bisogno di Sass: ti aiuta a organizzare e modulare i tuoi fogli di stile. Non sono variabili, non è nidificazione. Per me la caratteristica chiave di Sass sono i parziali e come estende la regola CSS @import per consentirgli di importare file SCSS e Sass. In pratica, ciò significa che sarai in grado di dividere il tuo enorme file style.css in diversi file più piccoli che saranno più facili da mantenere, comprendere e organizzare.

La regola @import esiste da quasi quanto il CSS stesso. Tuttavia, ha guadagnato una cattiva fama poiché quando usi @import nei tuoi file CSS, attivi richieste HTTP separate, una per ogni file CSS che stai importando. Questo può essere dannoso per le prestazioni del tuo sito. Allora cosa succede a cosa lo usi con Sass? Se non ti sei mai fermato a pensare a cosa significa la parola "preprocessore", ora è il momento.

Un preprocessore è un programma che elabora i suoi dati di input per produrre un output che viene utilizzato come input per un altro programma. —Wikipedia

Quindi, tornando alla nostra regola @import, questo significa che @import sarà gestito da Sass e tutti i nostri file CSS e SCSS verranno compilati in un unico file che finirà nel nostro sito live. L'utente dovrà fare una sola richiesta e scaricherà un unico file, mentre la struttura del vostro progetto può essere composta da centinaia di file modulari. Ecco come potrebbe apparire lo style.scss di un tipico progetto Sass:

 @import “variables”; @import “reset”; @import “fonts”; @import “base”; @import “buttons”; @import “layout”;

Non ripeterti: variabili

Qualsiasi articolo che elogia Sass inizierà probabilmente menzionando la sua caratteristica principale: le variabili. L'uso più comune delle variabili è una tavolozza di colori. Quante volte hai trovato diverse dichiarazioni di quello che dovrebbe essere lo stesso colore, finendo nel CSS con sfumature leggermente diverse perché nessuno usa lo stesso codice esadecimale? Sass in soccorso. In Sass, puoi dichiarare variabili con quasi tutti i valori. Quindi, la nostra tavolozza di colori può essere qualcosa come:

 $brand: #226666; $secondary: #403075; $emphasis: #AA8439;

Le parole che iniziano con “$” sono variabili Sass. Ciò significa che più avanti nei tuoi fogli di stile, sarai in grado di usare quelle parole e saranno mappate ai valori che hai definito in precedenza:

 body { background: $secondary; } .logo { color: $brand; } a { color: $emphasis; } a:hover { color: $brand; }

Immagina come questo potrebbe cambiare le nostre 7184 righe di codice CSS e potresti iniziare a desiderare Sass proprio ora. Ancora meglio, immagina che ci sia una riprogettazione del marchio e devi aggiornare tutti i colori nel tuo CSS. Con Sass, l'unica cosa che devi fare è aggiornare le dichiarazioni di quelle variabili una volta, e baam! Le modifiche riguarderanno i tuoi fogli di stile.

Ho codificato questo esempio in Sassmeister, un parco giochi di Sass. Quindi vai avanti e prova a cambiare quelle variabili in qualcos'altro.

L'utilità delle variabili non si limita solo ai colori, ma anche alle dichiarazioni dei caratteri, alle dimensioni, alle query multimediali e altro ancora. Questo è un esempio davvero basilare per darvi un'idea, ma credetemi, le possibilità con Sass sono infinite.

Codice sorgente più pulito: nidificazione

La nidificazione potrebbe essere forse la seconda caratteristica più citata del Sass. Quando sono tornato al CSS vanigliato dopo aver usato Sass, il file CSS che stavo guardando sembrava così disordinato che non ero sicuro che fosse minimizzato. Senza nidificazione, i CSS vanilla non sembrano migliori dei file .min.css stampati:

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; } .header.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .header .nav { list-style: none; } .header .nav li { display: inline-block; } .header .nav li a { display: block; padding: 0.5em; color: #AA8439; }

Con Nesting, puoi aggiungere classi tra le parentesi graffe di una dichiarazione. Sass compilerà e gestirà i selettori in modo abbastanza intuitivo. Puoi anche usare il carattere "&" per ottenere un riferimento del selettore genitore. Tornando al nostro esempio CSS, possiamo trasformarlo in:

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; &.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .nav { list-style: none; li { display: inline-block; a { display: block; padding: 0.5em; color: #AA8439; } } } }

Sembra bello ed è più facile da leggere. Sentiti libero di giocare con questo esempio.

Ancora! Non ripeterti: Mixin ed Extend

La ripetizione nei CSS è sempre difficile da evitare. E non fa male insistere un po' di più su questo, soprattutto quando Sass ti dà mixin ed estende. Sono entrambe caratteristiche potenti e aiutano a evitare molte ripetizioni. Le possibilità con mixin ed estensioni non sembrano avere fine. Con i mixin, puoi creare dichiarazioni CSS parametrizzate e riutilizzarle nei tuoi fogli di stile.

Ad esempio, supponiamo che tu abbia un modulo box con un pulsante all'interno. Vuoi che il bordo della casella e lo sfondo del pulsante siano dello stesso colore. Con il CSS vaniglia, fai qualcosa del tipo:

 .box { border: 2px solid red; } .box .button { background: red; }

Diciamo che ora vuoi lo stesso modulo box, ma con un colore diverso. Aggiungerai qualcosa del genere al tuo CSS:

 .box-alt { border: 2px solid blue; } .box-alt .button { background: blue; }

Ora, supponiamo che tu voglia un modulo box, ma con un bordo più sottile. Aggiungeresti:

 .box-slim { border: 1px solid red; } .box-slim .button { background: red; }

Molte ripetizioni, giusto? Con Sass puoi astrarre questi casi per ridurre la ripetizione. Potresti definire un mixin come questo:

 @mixin box($borderSize, $color) { border: $borderSize solid $color; .button { background: $color; } }

E così, il tuo codice sorgente può essere ridotto a:

 .box { @include box(2px, red); } .box-alt { @include box(2px, blue); } .box-slim { @include box(1px, red); }

Sembra bello, vero? Gioca con questo esempio. Puoi creare la tua libreria di mixin o, ancora meglio, puoi utilizzare una delle librerie della community disponibili.

Le estensioni sono simili, ti consentono di condividere le proprietà da un selettore all'altro. Tuttavia, invece di produrre più dichiarazioni, generano un elenco di classi senza ripetere le tue proprietà. In questo modo puoi anche evitare la ripetizione del codice nel tuo output. Dimentichiamoci dei pulsanti nel nostro esempio precedente e vediamo come funzionerebbe @extend con .boxes .

Diciamo che dichiari una prima casella:

 .box { margin: 1em; padding: 1em; border: 2px solid red; }

Ora vuoi due scatole simili a questa, ma con diversi colori del bordo. Puoi fare qualcosa come:

 .box-blue { @extend .box; border-color: blue; } .box-red { @extend .box; border-color: red; }

Ecco come sarebbe il CSS compilato:

 .box, .box-blue, .box-red { margin: 1em; padding: 1em; border: 2px solid red; } .box-blue { border-color: blue; } .box-red { border-color: red; }

Potente, vero? Puoi trovare l'esempio qui. Se esamini il CSS risultante, ti renderai conto che la classe .box è inclusa nell'output. Se non vuoi questo comportamento, puoi combinare @extend con "segnaposto". Un segnaposto è un selettore speciale che non produrrà una classe nel CSS. Ad esempio, a volte mi ritrovo a ripristinare molto gli stili predefiniti degli elenchi. In genere uso @extend con un segnaposto come questo:

 %unstyled-list { list-style: none; margin: 0; padding: 0; }

Puoi quindi riutilizzare questo modello in tutti i tuoi fogli di stile:

 .search-results { @extend %unstyled-list; } .posts { @extend %unstyled-list; } .nav { @extend %unstyled-list; }

Il tuo CSS compilato sarà simile a:

 .search-results, .posts, .nav { list-style: none; margin: 0; padding: 0; }

Dai un'occhiata agli esempi qui.

C'è di più?

Assolutamente! Non volevo complicare eccessivamente questo articolo, ma c'è un mondo impertinente che aspetta di essere scoperto da te; e ci sono anche molte funzionalità oltre a queste: operazioni, commenti a riga singola con //, funzioni, se i loop ... se mai avessi pensato "sarebbe fantastico fare qualcosa a 'X' con CSS", sono sicuro quella cosa 'X' l'ha già fatta il Sass. "CSS con superpoteri" è il suo slogan, e questo non può essere più vicino alla verità.

Conclusione

Vai e visita la pagina di installazione e inizia a hackerare! Credimi, non te ne pentirai.

Sì, ci sono delle alternative al Sass. Altri preprocessori (LESS, Stylus), postprocessori, Grunt, ecc. Esistono anche variabili CSS. Non sto dicendo che Sass sia l'unica tecnologia là fuori. Tutto quello che sto dicendo è che è il migliore! Almeno per ora. Non credi in quello che sto dicendo? Vai avanti e prova tu stesso. Non te ne pentirai!