Naše izkušnje preklapljajo z manj na Sass

Veliko je bilo napisanega o prehodu z vanilijevega CSS na predprocesor CSS in z dobrim razlogom - predprocesorji dodajo moč in nadzor, ki ga v brskalniku ne moremo dobiti sami. Iz člankov, ki pohvalite vrline predprocesorja za bolj tehnična branja, kot je podrobna Etsyjeva Prehod na SCSS v obsegu , «Se mi zdi, da sem jih vse požrl.

Ob MREŽE , naredili smo nekaj, o čemer ni pisalo skoraj toliko - prehod z enega predprocesorja na drugega. Na začetku je Sprout sprejel Manj ; konec lanskega leta smo se odločili, da preidemo na SCSS, sintakso, podobno CSS Sass . Vzeli smo si čas in zagotovili, da je bil prehod nemoten, izkušnje pa so pokazale nekaj globokih razlik med Less in Sass.

Zakaj?

Preden pridemo do tega, kar smo se naučili, bi moralo biti vaše prvo legitimno vprašanje: 'Zakaj bi se trudil?' Že smo imeli koristi od spremenljivk in kombinacij, @imports in barvnih funkcij. Vsekakor ima Sass številne funkcije, ki jim manjka, na primer zemljevidi in funkcije , vendar smo brez njih prišli tako daleč.

Izstopata dva glavna razloga za zamenjavo:

Skupnost: Poiščite razširitev lib v githubu: scss, nato pa razširitev lib: manj. Od tega pisanja so rezultati jasni: 120.234 datotek SCSS, 29.449 datotek manj. Preklop omogoča dostop do širšega nabora dobrih idej in večjega odprtokodnega bazena za kopanje. Tudi priljubljena knjižnica Bootstrap, eden od razlogov, zakaj je manj ostal sposoben preživetja, je napovedala prehaja na SCSS .
Hitrost: Libsass kamenje. Čas izdelave naših stilov se je izboljšal za več kot 500%. Čeprav Libsass še ni dohitel najnovejše različice specifikacije Sass, se nam zdi, da ničesar ne pogrešamo.

Kako?

Naš sestavljeni CSS ima skoraj 19.000 izbirnikov. Po preklopu je moral biti ta sestavljeni CSS skoraj enak; morali smo zagotoviti, da je ta prehod za naše stranke neviden. Kaj pa funkcije, ki so trenutno v obdelavi? Naše nedavna posodobitev sestavljanja spremenila 3.837 linij stilov - kako bi lahko ta ekipa varno preklopila srednji tok?

Upoštevali smo tri možnosti:

Najprej prevedite vse v CSS. To je edini način, da s 100-odstotno natančnostjo zagotovimo, da so naši uporabniki dobili enake sloge, in dejansko izklopimo stikalo v enem dnevu. Ideja o čistem odmoru je vedno mamljiva, toda nova koda ni vedno boljša koda . Tudi z orodji, kot je sass-pretvori in css2compass , čas, ki bi ga porabili za obnovo, bi močno odtehtal vse druge možnosti.
V SCSS pišite samo nove sloge. Razmislili smo o risanju črte v pesku - Manj je staro in uničeno; Sass je nova vročina . Končno smo zavrnili ta pojem. Toliko bi lahko pridobili s takojšnjim preklopom in nihče ni hotel ohraniti paritete med dvema nizoma mešanic in spremenljivk.
Pretvorite vse naše datoteke Less v SCSS in popravite napake. Soočeni smo bodisi z metanjem zgodovine bodisi z dodajanjem še ene naloge za vzdrževanje, smo se lotili pretvorbe vsega.

Čistilnica

SCSS se ne razlikuje toliko od Less, kajne? “ Pretvorba iz Less v Sass «Deli vrsto iskanj regularnih izrazov, da spremeni najbolj očitne razlike v sintaksi, na primer .awesome-mixin () v primerjavi z @mixin awesome-mixin (). Ta iskanja regularnih izrazov so zvita manj2sass , ki smo ga pregledali skozi vse naše datoteke.

Če bi bilo tako enostavno, pa res ne bi bilo kaj dosti za blog. Nekaj dolgotrajnih zahtev za vlečenje skripta less2sass poudarja nekatere njegove previdnosti, kot je razlike v interpolaciji niza . Bolj zahtevne so bile napake pri gradnji, ki smo jih naleteli po pretvorbi, ki so poudarile razlike, večje od preprostega regularnega izraza. Če smo odkriti, smo našli tudi nekaj slabih CSS-jev.

Vzeli smo te napake pri gradnji in sestavili seznam tega, kar moramo popraviti, in vedeli smo, da lahko večino popravimo, preden pretvorimo sloge. Odločili smo se, da bomo pred pretvorbo očistili datoteke Less.

Fixin ’Mixins

Začeli smo z razliko med načinoma, kako Less in Sass obravnavata pogojne pogoje. Tukaj je preprost gradientni mixin, ki smo ga imeli:

Sass ponuja preprosto strukturo @ if ... @ else, medtem ko je naš mixin uporabil tisto, kar Less imenuje a mešanica ščitnik . V primeru našega gradientnega mešanja smo ga uporabili za spremembo sintakse osnutka s predpono prodajalca v sintakso W3C. Vedeli smo, da bomo morali to kombinacijo prepisati.

Nato smo se ustavili in si dolgo ogledali vse naše kombinacije. Večina jih je dodala predpone prodajalcev in odpravila razlike v brskalniku, kot je zgornja mešanica prelivov. Enter Autoprefixer , orodje, ki razčleni CSS in uporabi predpone ponudnikov na podlagi seznama podprtih brskalnikov. Z dodajanjem Autoprefixerja v našo zgradbo smo odpravili devet mešanic. Kot bonus Autoprefixer odstrani nepotrebne predpone prodajalcev, ki so nam pomagale prepoznati nekaj prašnih vogalov v CSS-ju in ustvariti manjše prevedene datoteke.

Dobra lekcija iz naših izkušenj tukaj: Ne izgubljajte časa s pretvorbo ali preoblikovanjem tistega, kar lahko izbrišete.

Še ena razlika v mešanju, ki jo je vredno omeniti: Manj priporoča ločevanje parametrov s podpičji . Le nekaj je bilo napisanih na ta način, vendar jih je bilo treba vse spremeniti, v definicijah mešanic in tam, kjer so bili uporabljeni. Na srečo manj podpira podpičja in vejice, zato bi lahko to spremembo izvedli pred korakom pretvorbe.

angelska števila 933

Ampersand zloraba

Po obravnavi mešanic smo pozornost usmerili na drug vir napak pri gradnji: ampersandi . Je eden najmočnejših operaterjev tako v Sassu kot tudi v Lessu in delujeta zelo podobno. Razen kadar tega ne storijo. In potem delujejo zelo drugače.

Na primer, pri 19.000 izbirnikih si lahko predstavljate, da naletimo na težave s specifičnostmi, ki jih pogosto hitro rešimo kot take:

Manj proizvaja glavo h1.modal-header, kot bi človek sumil, toda Sass se zaduši. Poskusili smo ga popraviti z:

Odlično deluje z Ruby Sass, toda od tega pisanja Libsass te uporabe še ne podpira . V tem primeru nismo niti razmišljali o prehodu na Ruby Sass. Namesto tega smo napisali glavo h1.modal-head izven obsega .modal. Vemo, da je to znak težave, zato lahko z izvlekom izbirnika iz področja in s klicem s komentarjem te težave v naši kodi lažje prepoznamo.

Še slabše je bilo, če smo na ta način v mešanici uporabili ampersand. Tu je odlomek Manj mešanice, ki smo jo imeli za gumbe:

Zopet nam direktiva @ at-root v Libsassu ni mogla pomagati. V tem primeru smo morali preučiti osnovni vzrok za razveljavitev specifičnosti in ga odpraviti. (Dobra novica je, da smo jo popravili tako, da smo drugje izbrisali tri preveč specifične sloge.)

Druga razlika med ampersandoma Less in Sass je bila pravzaprav koristna:

Naše pričakovanje je bilo .checkbox-wrap> .checkbox-widget, .radio-wrap> .radio-widget. Vendar Less obdela ampersand z večjo rekurzijo in ga tako prevede:

V nobenem trenutku nismo - ali pa bi - uporabili pripomoček za potrditveno polje za izbirni gumb. Na srečo je Sass dejansko rešil težavo, za katero nismo vedeli, ker nismo gledali svojega sestavljenega CSS-ja.

Naučena lekcija: Pogosto si oglejte svoj sestavljeni CSS - sicer ne veste, kaj uporabniki prenašajo.

Primerjava rezultatov

Posodobitve za odpravljanje in odstranjevanje mešanic, odpravljanje razlik in odstopanj ter odpravljanje nekaterih drugih bitov, ki se ne bodo pretvorili čisto, so se pojavile v sedmih zavezah v enem mesecu. Bilo je dobro počistiti hišo in opredeliti prihodnje priložnosti za predelavo.

Vendar ni vseeno, kako izgleda naša izvorna koda; šteje tisto, kar je dostavljeno našim uporabnikom. Razmišljali smo o ustvarjanju AST za primerjavo našega sestavljenega CSS-ja. Po nekaj raziskavah in eksperimentiranju je postalo jasno, da potrebujemo le način, kako vedeti, ali se je v sestavljenem CSS spremenilo zelo malo. Zato bi zadostovale dobre staromodne razlike - čim manjša je razlika, tem bolje. Vsaka zahteva za vlečenje je imela razliko med rezultati pred in po kompilaciji Less. Orodje za razvijalce Xcode FileMerge je bilo zelo priročno primerjati rezultate vzporedno. Če smo videli kaj, česar nismo pričakovali, smo se vrnili v preiskavo.

Ko smo šli na našo geslo za iskanje in zamenjavo regularnih izrazov in dejansko pretvorili datoteke v SCSS, smo ostali pri FileMerge in diffs. Vendar pa so rezultati, ki sta jih pripravila dva različna predprocesorja, naše razlike neuporabili zaradi razlik v zavihkih in namestitvi oklepajev. Dodali smo dodaten korak za normalizacijo oblike CSS pred in po preprost skript vozlišča . Zmanjša CSS, nato pa ga polepša. Ne more biti preprostejše.

Normaliziranje oblikovanja je zelo pomagalo, vendar je česanje razlike vseeno trajalo približno dva solidna dneva pregleda. Nagrajevalni postopek, vendar naporen. Dvomimo, da bi prilagojena rešitev AST pripomogla k hitrejšemu pregledu. Treba je bilo odpraviti vse razlike.

Toda razlike so bile majhne. Izbirniki v nekoliko drugačnem vrstnem redu, decimalno zaokroževanje in celo majhne razlike v rezultatih barvnih funkcij. Vsako razliko smo natančno preverili, preden smo naš Sassed-up CSS potisnili v proizvodnjo.

Kaj je naslednje

Ko se je delo v teku skorajda ustavilo. Manj datotek, ki so še v razvoju, je bilo enostavno pretvoriti, zahvaljujoč vsem predhodno opravljenim pripravljalnim delom. Vsi so bili pripravljeni v približno dveh dneh. Tudi preoblikovana ekipa Compose se je v nekaj urah lahko regeksirala do SCSS. Načrtovanje vnaprej in čiščenje obstoječih stilov pred pritiskom na stikalo je vse spremenilo.

Zdaj nadaljujemo z prepoznavanjem vzorcev, razdeljevanjem velikih datotek CSS v module, revizijo CSS v proizvodnji za neuporabljene izbirnike in porabo več časa za orodja za primerjavo AST ali kakšno drugo razčlenjeno predstavitev našega CSS. Ali sem omenil, da imamo skoraj 19.000 izbirnikov CSS? Smo že na tem - ampak to je povsem drug članek.

Delite S Prijatelji: