Less-Sass-Switch-01

S’ha escrit molt sobre el canvi de CSS de vainilla a un preprocessador CSS i, per una bona raó, els preprocessadors afegeixen potència i control que no podem obtenir només al navegador. D’articles que exalta les virtuts d’un preprocessador a lectures més tècniques com el detallat d'Etsy ' Transició a SCSS a escala ', Em sembla que els devorava a tots.



A hashtags , hem fet alguna cosa que no s'ha escrit gaire sobre tant: canviar d'un preprocessador a un altre. Al principi, Sprout va adoptar Menys ; vam prendre la decisió a finals de l'any passat de canviar a SCSS, la sintaxi de CSS Sass . Vam prendre el nostre temps per assegurar-nos que la transició fos fluida i l'experiència va posar de manifest algunes diferències profundes entre Less i Sass.



Per què?

Abans d’arribar al que hem après, la vostra primera pregunta, legítima, hauria de ser: 'Per què molestar-se?' Ja ens hem beneficiat de variables i mixins, @imports i funcions de color. Certament, Sass té una sèrie de característiques que menys li falten, com ara mapes i funcions , però hem arribat fins aquí sense ells.

Destaquen dos motius principals per canviar:

  1. Comunitat: Cerqueu a github l'extensió lib: scss i, a continuació, cerqueu l'extensió lib: less. A partir d’aquest escrit, els resultats són clars: 120.234 fitxers SCSS, 29.449 menys fitxers. El canvi permet accedir a una àmplia gamma de bones idees i a una piscina de font oberta més gran per nedar. Fins i tot la popular biblioteca Bootstrap, una de les raons per les quals Less ha estat viable, ha anunciat s'està canviant a SCSS .
  2. Velocitat: Libsass roques. El temps de construcció dels nostres estils va millorar en més d’un 500%. Tot i que Libsass encara no s’ha posat al dia amb l’última versió de l’especificació Sass, no creiem que ens falti res.

Com?

El nostre CSS compilat té prop de 19.000 selectors. Després del canvi, aquell CSS compilat havia de ser gairebé idèntic; havíem de garantir que aquesta transició fos invisible per als nostres clients. I què passa amb les funcions en curs? El nostre actualització recent de redacció va canviar 3.837 línies d’estils: com podria aquest equip canviar de corrent de forma segura?

Vam considerar tres opcions:

  1. Compileu-ho tot a CSS primer. És l’única manera d’assegurar amb un 100% de precisió que els nostres usuaris rebien els mateixos estils i, en realitat, treure l’interruptor en un dia. La idea d’un descans net sempre és atractiva, però el codi nou no sempre és millor . Fins i tot amb eines com sass-convert i css2compass , el temps que dedicaríem a reconstruir superaria enormement qualsevol altra opció.
  2. Escriviu estils nous només a SCSS. Vam plantejar-nos dibuixar una línia a la sorra ... Menys és vell i rebentat; Sass és la nova calidesa . En última instància, vam rebutjar aquesta noció. Es canviaria tanta cosa si es canvia immediatament i ningú no volia mantenir la paritat entre dos conjunts de combinacions i variables.
  3. Convertiu tots els nostres fitxers Less a SCSS i corregiu els problemes. Davant de llançar la història o afegir una altra tasca de construcció per mantenir, ens hem dedicat a convertir-ho tot.

Neteja de la casa

SCSS no és tan diferent de Less, oi? ' Conversió de Less a Sass ”Comparteix una sèrie de cerques regulars per canviar les diferències de sintaxi més evidents, com ara .awesome-mixin () vs @mixin awesome-mixin (). Aquestes cerques regulars es compleixen less2sass , que vam examinar tots els nostres fitxers.



Si fos tan fàcil, però, realment no hi hauria molt de què escriure. Algunes sol·licituds de tirades persistents a l'script less2sass emfatitzen alguns dels seus descuit, com ara diferències d’interpolació de cadenes . Més difícils van ser els errors de compilació que vam trobar després de la conversió, que van ressaltar diferències superiors a les que una simple expressió regular podria resoldre. Per ser franc, també hem trobat alguns CSS dolents.

Vam agafar aquests errors de compilació i vam fer una llista del que havíem de corregir i sabíem que podríem corregir-ne la majoria abans de convertir els estils. Vam decidir netejar els nostres fitxers Menys abans de convertir-los.

Fixin ’Mixins

Vam començar amb la diferència entre la forma en què Less i Sass gestionen els condicionants. Aquí teniu una barreja de degradat simple que teníem:



Sass ofereix una estructura simple @ if ... @ else, mentre que el nostre mixin utilitza el que Less anomena a mixin guard . En el cas del nostre mixin de degradat, l’utilitzàvem per canviar de la sintaxi d’esborrany prefixada pel proveïdor a la sintaxi W3C. Sabíem que hauríem de reescriure aquest mixin.

Després, ens vam aturar i vam mirar de llarg tots els nostres mixins. La majoria d'ells van afegir prefixos de proveïdor i van resoldre les diferències del navegador, com ara el gradient mixin anterior. Entra Autoprefixer , una eina que analitza CSS i aplica prefixos de proveïdor basats en una llista de navegadors compatibles. En afegir Autoprefixer a la nostra versió, vam eliminar nou mixins. Com a bonificació, Autoprefixer elimina els prefixos de proveïdor innecessaris, cosa que ens va ajudar a identificar alguns racons polsegosos al nostre CSS i a produir fitxers compilats més petits.

Una bona lliçó de la nostra experiència aquí: no perdeu el temps convertint o refactoritzant allò que podeu suprimir.

Cal destacar una altra diferència de combinacions: Less recomana separar paràmetres amb punts i coma . Només se n’havien escrit uns quants d’aquesta manera, però s’havien de canviar tots, en les definicions mixin i on s’aplicaven. Afortunadament, Less admet punt i coma i comes, de manera que podríem fer aquest canvi abans del pas de conversió.

número 17 significat bíblic

Abús de Ampersand

Després d’abordar els mixins, vam dirigir la nostra atenció cap a una altra font d’errors de compilació: ampersands . És un dels operadors més potents tant de Sass com de Less, i funcionen de manera similar. Excepte quan no ho fan. I després funcionen de manera molt diferent.

Per exemple, amb 19.000 selectors, us podeu imaginar que ens trobem amb problemes d’especificitat, sovint resolts ràpidament com a tals:

Menys produeix capçalera h1.modal com es podria sospitar, però Sass s'ofega. Hem provat de solucionar-ho amb:

Funciona molt bé amb Ruby Sass, però a partir d’aquest escrit, Libsass encara no admet aquest ús . Ni tan sols ens vam plantejar, en aquest cas, canviar a Ruby Sass. En lloc d’això, vam escriure h1.modal-header fora de l’àmbit de .modal. Sabem que això és una indicació d’un problema, de manera que traient el selector fora de l’abast i cridant-lo amb un comentari, podem identificar aquests problemes al nostre codi amb més facilitat.

Va empitjorar quan s’utilitzava una marca d’ampers d’aquesta manera en un mixin. Aquí teniu un fragment d’un Mixin menys que teníem per als botons:

De nou, la directiva @ at-root no ens va poder ajudar a Libsass. En aquest cas, havíem d’examinar la causa arrel de la substitució de l’especificitat i resoldre-la. (La bona notícia és que ho vam solucionar eliminant tres estils massa específics en altres llocs.)

Una altra diferència entre els signes Less i Sass va ser realment útil:

La nostra expectativa era .checkbox-wrap> .checkbox-widget, .radio-wrap> .radio-widget. Tanmateix, Less processa l'ampersand amb més recursivitat i es compila així:

En cap moment hem utilitzat, o no, un widget de casella de selecció per a un botó d’opció. Afortunadament, Sass va resoldre un problema que desconeixíem perquè no estàvem mirant el nostre CSS compilat.

Lliçó apresa: mireu sovint el vostre CSS compilat; en cas contrari, no sabeu què baixen els vostres usuaris.

Comparant els resultats

Les actualitzacions per solucionar i suprimir els mixins, resoldre discrepàncies i diferències i solucionar alguns altres bits que no es convertirien netament es van produir en set confirmacions al llarg d’un mes. Em va semblar bé netejar la casa i identificar futures oportunitats de refactorització.

Tot i això, no importa l’aspecte del nostre codi font; és el que s’entrega als nostres usuaris. Ens vam plantejar generar AST per comparar el nostre CSS compilat. Després d'algunes investigacions i experimentacions, va quedar clar que tot el que necessitàvem era una manera de saber si havia canviat molt poc al CSS compilat. Per tant, n’hi hauria prou amb bones diferències a l’antiga: com més petites siguin les diferències, millor. Cada sol·licitud d'extracció va incloure una diferència dels resultats abans i després de la compilació de Less. L'eina per a desenvolupadors de Xcode FileMerge va ser molt útil comparar els resultats un al costat de l’altre. Si vam veure alguna cosa que no esperàvem, vam tornar a investigar.

Ens hem quedat amb FileMerge i diffs un cop hem anat a l'estampada de cerca i substitució de l'expressió regular i hem convertit els fitxers a SCSS. Tanmateix, els resultats compilats per dos preprocessadors diferents van fer inútils els nostres diferits a causa de les diferències en la col·locació de tauletes i de claudàtors. Hem afegit un pas addicional per normalitzar el format del CSS abans i després un simple node script . Minimitza el CSS i després l’embelleix. No podria ser més senzill.

Normalitzar el format va ajudar molt, però pentinar-se per la diferència encara va trigar uns dos dies de revisió. Un procés gratificant però ardu. Dubtem que una solució AST personalitzada hagués ajudat a accelerar la revisió. Calia solucionar totes les diferències.

Però les diferències eren menors. Selectors en un ordre lleugerament diferent, arrodoniment decimal i fins i tot lleugeres diferències en els resultats de les funcions de color. Cada diferència es va comprovar acuradament abans d'emprendre el nostre CSS Sassed-up a la producció.

Que segueix

Un cop fusionats, els treballs en curs pràcticament no es van estancar. Fàcil de convertir menys fitxers encara en desenvolupament, gràcies a tot el treball de preparació realitzat amb anterioritat. Tothom estava en funcionament en uns dos dies. Fins i tot l’equip redissenyat de Compose va ser capaç d’expressar el seu camí cap a SCSS en qüestió d’hores. Planificar amb antelació i netejar els estils existents abans de prémer l'interruptor va marcar la diferència.

Ara continuem amb els patrons d’identificació, dividint els fitxers CSS grans en mòduls, auditant CSS en producció per a selectors no utilitzats i dedicant més temps a eines per comparar ASTs o alguna altra representació analitzada del nostre CSS. He mencionat que tenim prop de 19.000 selectors CSS? Hi estem, però aquest és un altre article completament.

Comparteix Amb Els Teus Amics: