Preprocessore CSS
Da SCSS, Less e Stylus a CSS

Cosa fa un preprocessore CSS

Un foglio di stile con annidamento non è CSS valido. Il browser scarta l'intera regola e non dice nulla. Perciò questo preprocessore CSS appiattisce l'annidamento, sostituisce le variabili con i loro valori e scrive il CSS piatto che un browser può leggere.

Da un solo incolla tornano tre cose. Prima il CSS compilato stesso, pronto da incollare in un file. Poi una lista delle variabili e dei mixin trovati, con il valore che ognuno porta. Infine un pannello di note che nomina tutto ciò che il compilatore ha dovuto decidere da solo.

Quest'ultimo pannello conta più di quanto sembri. Un'ipotesi silenziosa dentro il CSS compilato è un layout rotto due schermate più avanti. Quindi ogni ipotesi viene stampata accanto all'output invece che sepolta dentro.

Il convertitore lavora anche al contrario. Poiché un file piatto è difficile da tenere in ordine, può raggruppare CSS normale di nuovo in SCSS o Less annidato, con i valori condivisi tirati fuori come variabili. Non installi nulla e non invii nulla.

Come un preprocessore compila in CSS

Il lavoro si svolge in tre passaggi. Prima il lettore trasforma il sorgente in una lista di regole, ognuna con un selettore, un blocco e una profondità. Poi un secondo passaggio unisce i selettori annidati ai loro genitori. Infine uno scrittore stampa le regole piatte in ordine.

Unire i selettori segue le regole dei selettori che il browser stesso usa. Una regola annidata una volta diventa un selettore discendente. Una regola scritta con una e commerciale tiene il genitore attaccato, ed è così che si costruiscono uno stato hover e una classe modificatrice.

Le variabili sono il secondo lavoro. Poiché SCSS e Less permettono entrambi che un nome stia per un valore, il compilatore cerca ogni nome che incontra e scrive il valore al suo posto. Le variabili Sass iniziano con un segno del dollaro, e quelle Less con una chiocciola, quindi il lettore le distingue dal primo carattere.

Lo scrittore non tocca mai un'API del browser e mai la rete. Quindi la pagina funziona offline. Funziona anche su un file che preferisci non incollare in un compilatore ospitato, come un foglio di stile che nomina un prodotto non annunciato.

SCSS, Less e Stylus fianco a fianco

I tre linguaggi concordano sull'idea e differiscono sulla punteggiatura. Quindi il compilatore legge tutti e tre e scrive un solo output.

Lo SCSS mantiene le graffe e i punti e virgola del CSS, ed è per questo che sembra CSS con funzioni in più. Il Less fa lo stesso, e permette anche una chiamata parziale a un mixin senza parentesi. Lo Stylus lascia cadere le graffe, i punti e virgola e spesso i due punti, e si affida all'indentazione invece.

Poiché le differenze sono piccole, una sola pagina può leggere tutti e tre. Il lettore decide quale linguaggio ha davanti guardando il file: un segno del dollaro punta allo SCSS, una chiocciola davanti a un nome punta al Less, e una graffa assente punta allo Stylus. Quando il sorgente è ambiguo, la pagina lo dice nel pannello delle note invece di indovinare.

L'output è lo stesso in ogni caso. Quindi il browser vede un solo foglio di stile piatto, e tu tieni il sorgente nel linguaggio che il tuo team già usa.

Perché unire i selettori è la parte difficile

Un compilatore che incolla i due selettori con uno spazio sbaglia quasi tutto l'annidamento. Poiché una regola annidata sotto un genitore diventa discendente solo quando non c'è la e commerciale, il lettore tiene traccia del genitore a ogni livello mentre scende.

Quindi ogni blocco conserva il selettore completo che stamperà. Una regola in cima parte con il proprio selettore. Poi una regola dentro di essa eredita quello e aggiunge il suo, separati da uno spazio. Una e commerciale sostituisce lo spazio del tutto, ed è così che lo stato hover di un genitore si attacca senza buco.

L'ordine delle regole stampate è il terzo caso. Poiché una regola più tarda di uguale peso vince, lo scrittore conserva l'ordine del sorgente a ogni livello. In questo modo la cascata sopravvive alla compilazione, e una regola che volevi vincente vince ancora.

Cosa compila pulito e cosa riceve una nota

Un compilatore si guadagna la fiducia nominando i propri limiti. Perciò il pannello delle note elenca ogni costruzione che il lettore ha gestito in un modo che dovresti controllare.

Le definizioni e le inclusioni dei mixin compilano, perché entrambi i linguaggi le definiscono nel sorgente che hai incollato. Le espressioni di guardia del Less compilano quando la condizione è un confronto semplice. Quindi un mixin con guardia inserisce il ramo che corrisponde.

L'interpolazione riceve una nota più spesso. Poiché un valore costruito da una variabile dentro una stringa ha bisogno del valore al momento della compilazione, il lettore può risolverlo solo quando la variabile è nello stesso file. Un valore che viene da un import che la pagina non ha resta come scritto, e la nota dice quale nome mancava.

Anche gli import stessi ricevono una nota. La pagina non può recuperare un altro file, dato che non tocca mai la rete. Quindi un at-import resta nell'output come un normale import CSS, e il pannello dice che il file non è stato letto. Questo tiene l'output onesto invece che silenziosamente sbagliato.

Il conteggio accanto all'output fa parte della stessa idea. Poiché una compilazione può cambiare la dimensione di un file in entrambi i sensi, il pannello riporta le regole scritte, le dichiarazioni che contengono e la dimensione dell'input e dell'output. Quindi un foglio di stile che è cresciuto dopo la compilazione si vede a colpo d'occhio e non dopo un deploy.