La nostra esperienza passando da Less a Sass

È stato scritto molto sul passaggio dal vanilla CSS a un preprocessore CSS e per una buona ragione: i preprocessori aggiungono potenza e controllo che non possiamo ottenere dal solo browser. Da articoli che esaltare le virtù di un preprocessore a letture più tecniche come il dettagliato di Etsy ' Transizione a SCSS su larga scala , 'Mi sembra di averli divorati tutti.

A HASHTAG , abbiamo fatto qualcosa di cui non è stato scritto tanto: passare da un preprocessore a un altro. All'inizio, Sprout ha adottato Di meno ; abbiamo deciso alla fine dell'anno scorso di passare a SCSS, la sintassi simile ai CSS di Sass . Ci siamo presi il nostro tempo per assicurarci che la transizione fosse fluida e l'esperienza ha evidenziato alcune profonde differenze tra Less e Sass.

Perché?

Prima di arrivare a quello che abbiamo imparato, la tua prima domanda, legittima, dovrebbe essere: 'Perché preoccuparsi?' Abbiamo già beneficiato di variabili e mixin, @imports e funzioni di colore. Sicuramente Sass ha una serie di funzionalità che Less manca, come mappe e funzioni , ma siamo arrivati fin qui senza di loro.

Spiccano due ragioni principali per cambiare:

Comunità: Cerca in GitHub l'estensione lib: scss, quindi cerca l'estensione lib: less. Al momento della stesura di questo documento, i risultati sono chiari: 120.234 file SCSS, 29.449 file in meno. Il passaggio offre l'accesso a una gamma più ampia di buone idee e una piscina open source più ampia per nuotare. Anche la popolare libreria Bootstrap, uno dei motivi per cui Less è rimasta valida, ha annunciato sta passando a SCSS .
Velocità: Libsass rocce. Il tempo di costruzione dei nostri stili è migliorato di oltre il 500%. Sebbene Libsass non abbia ancora raggiunto l'ultima versione delle specifiche Sass, non riteniamo ci manchi nulla.

Come?

Il nostro CSS compilato ha quasi 19.000 selettori. Dopo il passaggio, quel CSS compilato doveva essere quasi identico; dovevamo assicurarci che questa transizione fosse invisibile ai nostri clienti. E per quanto riguarda le funzionalità attualmente in corso? Nostro recente aggiornamento di composizione ha cambiato 3.837 linee di stili: come ha potuto quel team passare in modo sicuro a midstream?

Abbiamo considerato tre opzioni:

Compila prima tutto in CSS. È l'unico modo per garantire con una precisione del 100% che i nostri utenti ricevessero gli stessi stili e di ottenere effettivamente il passaggio in un giorno. L'idea di una pausa pulita è sempre allettante, ma il nuovo codice non è sempre un codice migliore . Anche con strumenti come sass-convert e css2compass , il tempo che dedicheremmo alla ricostruzione supererebbe di gran lunga qualsiasi altra opzione.
Scrivi solo nuovi stili in SCSS. Abbiamo considerato di tracciare una linea nella sabbia - Meno è vecchio e rotto; Sass è il nuovo hotness . Alla fine, abbiamo rifiutato questa nozione. Si sarebbe guadagnato così tanto dal passaggio immediato e nessuno voleva mantenere la parità tra due serie di mixin e variabili.
Converti tutti i nostri file Less in SCSS e correggi le interruzioni. Di fronte all'eliminazione della cronologia o all'aggiunta di un'altra attività di compilazione da mantenere, abbiamo deciso di convertire tutto.

Pulire la casa

SCSS non è così diverso da Less, vero? ' Conversione da Less a Sass 'Condivide una serie di ricerche regex per modificare le differenze di sintassi più evidenti, come .awesome-mixin () vs @mixin awesome-mixin (). Quelle ricerche regex sono raggruppate in less2sass , che abbiamo analizzato in tutti i nostri file.

Se fosse così facile, però, non ci sarebbe davvero molto di cui blog. Alcune richieste pull persistenti allo script less2sass sottolineano alcune delle sue sviste, come differenze di interpolazione delle stringhe . Più impegnativi sono stati gli errori di compilazione che abbiamo riscontrato dopo la conversione, che hanno evidenziato differenze maggiori di quanto una semplice regex potrebbe risolvere. Ad essere sinceri, abbiamo anche trovato dei CSS scadenti.

Abbiamo preso quegli errori di compilazione e fatto un elenco di ciò che dovevamo correggere, e sapevamo che avremmo potuto risolvere la maggior parte di essi prima di convertire gli stili. Abbiamo deciso di ripulire i nostri file Less prima della conversione.

Fixin 'Mixins

Abbiamo iniziato con la differenza tra il modo in cui Less e Sass gestiscono i condizionali. Ecco un semplice mix di sfumature che abbiamo avuto:

Sass offre una semplice struttura @ if ... @ else, mentre il nostro mixin utilizzava ciò che Less chiama a guardia di mixin . Nel caso del nostro gradiente mixin, lo stavamo usando per passare dalla sintassi bozza prefissata dal fornitore alla sintassi W3C. Sapevamo che avremmo dovuto riscrivere questo mixin.

Quindi, ci siamo fermati e abbiamo dato una lunga occhiata a tutti i nostri mixin. La maggior parte di loro ha aggiunto prefissi del fornitore e risolto differenze del browser come il mix di sfumature sopra. accedere Autoprefixer , uno strumento che analizza CSS e applica i prefissi dei fornitori in base a un elenco di browser supportati. Aggiungendo l'Autoprefixer alla nostra build, abbiamo eliminato nove mixin. Come bonus, Autoprefixer rimuove i prefissi dei fornitori non necessari, che ci hanno aiutato a identificare alcuni angoli polverosi nel nostro CSS e produrre file compilati più piccoli.

Una buona lezione dalla nostra esperienza qui: non perdere tempo a convertire o refactoring ciò che puoi eliminare.

Un'altra differenza di mixin degna di nota: Less consiglia di separare i parametri con punto e virgola . Solo pochi erano stati scritti in questo modo, ma dovevano essere tutti cambiati, nelle definizioni di mixin e dove venivano applicati. Fortunatamente, Less supporta sia il punto e virgola che le virgole, quindi potremmo apportare questa modifica prima del passaggio di conversione.

vedere costantemente 1111

Abuso e commerciale

Dopo aver affrontato i mixin, abbiamo rivolto la nostra attenzione a un'altra fonte di errori di compilazione: e commerciali . È uno degli operatori più potenti sia in Sass che in Less e funzionano in modo molto simile. Tranne quando non lo fanno. E poi funzionano in modo molto diverso.

Ad esempio, con 19.000 selettori, puoi immaginare che ci imbattiamo in problemi di specificità, spesso risolti rapidamente come tali:

Less produce h1.modal-header come si potrebbe sospettare, ma Sass soffoca. Abbiamo provato a risolverlo con:

Funziona alla grande con Ruby Sass, ma al momento della scrittura, Libsass non supporta ancora questo utilizzo . Non abbiamo nemmeno considerato, in questo caso, il passaggio a Ruby Sass. Abbiamo invece scritto h1.modal-header al di fuori dell'ambito di .modal. Sappiamo che questa è un'indicazione di un problema, quindi estraendo il selettore dall'ambito e richiamandolo con un commento, possiamo identificare più facilmente quei problemi nel nostro codice.

È peggiorato quando una e commerciale è stata usata in questo modo in un mixin. Ecco un estratto di un mix di Less che avevamo per i pulsanti:

Ancora una volta, la direttiva @ at-root non ha potuto aiutarci in Libsass. In questo caso, abbiamo dovuto esaminare la causa principale dell'override di specificità e risolverlo. (La buona notizia è che l'abbiamo risolto eliminando tre stili eccessivamente specifici altrove.)

Un'altra differenza tra Less e Sass e commerciale è stata effettivamente utile:

La nostra aspettativa era .checkbox-wrap> .checkbox-widget, .radio-wrap> .radio-widget. Tuttavia, Less elabora la e commerciale con più ricorsione e viene compilato in questo modo:

Non abbiamo mai utilizzato, o lo avremmo voluto, un widget casella di controllo per un pulsante di opzione. Fortunatamente, Sass ha effettivamente risolto un problema di cui non eravamo a conoscenza perché non stavamo guardando il nostro CSS compilato.

Lezione appresa: guarda spesso il tuo CSS compilato, altrimenti non sai cosa stanno scaricando i tuoi utenti.

Confronto dei risultati

Gli aggiornamenti per correggere e rimuovere i mixin, risolvere discrepanze e commerciali e risolvere alcuni altri bit che non sarebbero stati convertiti in modo pulito si sono verificati su sette commit nel corso di un mese. È stato bello pulire la casa e identificare future opportunità di refactoring.

Tuttavia non importa come appare il nostro codice sorgente; è ciò che viene fornito ai nostri utenti che conta. Abbiamo considerato la generazione AST per confrontare il nostro CSS compilato. Dopo alcune ricerche e sperimentazioni, è diventato chiaro che tutto ciò di cui avevamo bisogno era un modo per sapere se molto poco era cambiato nel CSS compilato. Pertanto, i buoni diff vecchio stile sarebbero sufficienti: più piccolo è il diff, meglio è. Ogni richiesta pull veniva fornita con una differenza dei risultati prima e dopo della compilazione Less. Lo strumento per sviluppatori Xcode FileMerge è stato molto utile confrontare i risultati fianco a fianco. Se abbiamo visto qualcosa che non ci aspettavamo, siamo tornati per indagare.

Siamo rimasti con FileMerge e diff una volta che siamo passati alla nostra regex find-and-replace stampede e abbiamo effettivamente convertito i file in SCSS. Tuttavia, i risultati compilati da due diversi preprocessori hanno reso inutili i nostri diff a causa delle differenze di tabulazione e posizionamento delle parentesi. Abbiamo aggiunto un passaggio aggiuntivo per normalizzare il formato del CSS prima e dopo con un semplice script di nodo . Minifica il CSS, quindi lo abbellisce. Non potrebbe essere più semplice.

La normalizzazione della formattazione è stata di grande aiuto, ma per esaminare il diff sono voluti circa due giorni solidi di revisione. Un processo gratificante ma arduo. Dubitiamo che una soluzione AST personalizzata avrebbe contribuito ad accelerare la revisione. Tutte le differenze dovevano essere affrontate.

Ma le differenze erano minori. Selettori in un ordine leggermente diverso, arrotondamento decimale e persino lievi differenze nei risultati delle funzioni di colore. Ogni differenza è stata verificata attentamente prima di mettere in produzione il nostro CSS Sassed-up.

Qual è il prossimo

Una volta uniti, i lavori in corso difficilmente si sono fermati. Meno file ancora in sviluppo erano facili da convertire, grazie a tutto il lavoro di preparazione svolto in anticipo. Tutti erano operativi in circa due giorni. Persino il team di Compose ridisegnato è stato in grado di passare a SCSS in poche ore. Pianificare in anticipo e ripulire gli stili esistenti prima di premere l'interruttore ha fatto la differenza.

Ora stiamo andando avanti con l'identificazione dei modelli, la scomposizione di file CSS di grandi dimensioni in moduli, l'audit dei CSS in produzione per i selettori inutilizzati e dedichiamo più tempo agli strumenti per confrontare AST o qualche altra rappresentazione analizzata del nostro CSS. Ho già detto che abbiamo quasi 19.000 selettori CSS? Ci stiamo lavorando, ma questo è completamente un altro articolo.

Condividi Con I Tuoi Amici: