Manje-Sass-Switch-01

Puno je napisano o prelasku s vanilin CSS-a na CSS pretprocesor, i to s dobrim razlogom - pretprocesori dodaju snagu i kontrolu koju ne možemo dobiti samo u pregledniku. Iz članaka koji veličajte vrline pretprocesora na više tehničkih čitanja poput Etsyjevog detaljnog ' Prijelaz na SCSS u mjerilu , 'Osjećam se kao da sam ih sve progutao.



Na HASHTAGOVI , učinili smo nešto o čemu još nije gotovo ni približno napisano - prebacivanje s jednog pretprocesora na drugi. Rano je Sprout usvojio Manje ; donijeli smo odluku krajem prošle godine da pređemo na SCSS, sintaksu nalik CSS-u Sass . Uzeli smo si vremena kako bismo osigurali da prijelaz bude gladak, a iskustvo je naglasilo neke duboke razlike između Lessa i Sassa.

Zašto?

Prije nego što dođemo do onoga što smo naučili, vaše prvo legitimno pitanje trebalo bi biti: 'Zašto se truditi?' Već smo imali koristi od varijabli i kombinacija, uvoza i funkcija boja. Svakako, Sass ima brojne značajke koje manje nedostaju, poput Karte i funkcije , ali stigli smo tako daleko bez njih.



Izdvajaju se dva glavna razloga za prebacivanje:

  1. Zajednica: Pretražite github za proširenje lib: scss, a zatim potražite proširenje lib: manje. Od pisanja ovog članka rezultati su jasni: 120.234 SCSS datoteke, 29.449 datoteka manje. Prebacivanje nudi pristup širem nizu dobrih ideja i većem bazenu otvorenog koda za plivanje. Čak je i popularna knjižnica Bootstrap, jedan od razloga zbog kojih je Less ostao održiv, najavila prebacuje se na SCSS .
  2. Ubrzati: Libsass stijene. Vrijeme izrade naših stilova poboljšalo se za preko 500%. Iako Libsass još nije stigao najnoviju verziju specifikacije Sass, ne osjećamo da nam nešto nedostaje.

Kako?

Naš sastavljeni CSS ima gotovo 19 000 selektora. Nakon prebacivanja, taj kompilirani CSS trebao je biti gotovo identičan; morali smo osigurati da ovaj prijelaz bude nevidljiv za naše kupce. A što je sa značajkama koje su trenutno u tijeku? Naše nedavno ažuriranje sastavljanja promijenio 3.837 linija stilova - kako je taj tim mogao sigurno prebaciti srednji tok?

Razmotrili smo tri mogućnosti:

  1. Prvo sve prevedite u CSS. To je jedini način da sa 100% točnošću osiguramo da naši korisnici dobivaju iste stilove i da zapravo povučemo prekidač u jednom danu. Ideja čistog odmora uvijek mami, ali novi kod nije uvijek bolji kod . Čak i s alatima kao što su sass-pretvoriti i css2compass , vrijeme koje bismo proveli u obnovi uvelike bi nadmašilo bilo koju drugu mogućnost.
  2. U SCSS pišite samo nove stilove. Razmišljali smo o crtanju crte u pijesku - Manje je staro i razbijeno; Sass je nova vrućina . U konačnici smo odbacili ovaj pojam. Toliko bi se dobilo prebacivanjem odmah i nitko nije želio održavati paritet između dva skupa kombinacija i varijabli.
  3. Pretvorite sve naše datoteke Less u SCSS i popravite probleme. Suočeni s izbacivanjem povijesti ili dodavanjem drugog zadatka izrade za održavanje, pristupili smo pretvaranju svega.

Čišćenje kuće

SCSS se ne razlikuje toliko od Less, zar ne? “ Pretvaranje iz Less u Sass ”Dijeli niz pretraživanja regularnih izraza kako bi se promijenile najočitije razlike u sintaksi, poput .awesome-mixin () vs @mixin awesome-mixin (). Ta su pretraživanja regularnih izraza zamotana u manje2sass , koju smo pregledali kroz sve naše datoteke.

Da je to tako lako, zaista ne bi bilo puno toga za blog. Nekoliko dugotrajnih zahtjeva za povlačenjem skripte less2sass naglašava neke od njegovih previda, kao što je razlike u interpolaciji niza . Izazovnije su bile pogreške u gradnji na koje smo naišli nakon pretvorbe, što je naglasilo razlike veće nego što ih može riješiti jednostavan regularni izraz. Da budemo iskreni, pronašli smo i loš CSS.

Uzeli smo te pogreške u gradnji i napravili popis onoga što smo trebali popraviti i znali smo da većinu toga možemo popraviti prije pretvorbe stilova. Odlučili smo očistiti manje datoteke prije pretvorbe.

Fixin ’Mixins

Počeli smo s razlikom između načina na koji Less i Sass postupaju s uvjetnim uvjetima. Evo jednostavne gradijentne smjese koju smo imali:

Sass nudi jednostavnu strukturu @ if ... @ else, dok je naš mixin upotrijebio ono što Less naziva a mixin čuvar . U slučaju našeg miješanja gradijenta, koristili smo ga za promjenu iz sintakse nacrta s prefiksom dobavljača u sintaksu W3C. Znali smo da ćemo morati prepisati ovaj mixin.

Zatim smo zastali i dugo pogledali sve svoje kombinacije. Većina ih je dodala prefikse dobavljača i riješila razlike u pregledniku, poput gornje kombinacije gradijenata. Unesi Autoprefixer , alat koji raščlanjuje CSS i primjenjuje prefikse dobavljača na temelju popisa podržanih preglednika. Dodavanjem Autoprefixera u našu izradu eliminirali smo devet kombinacija. Kao bonus, Autoprefixer uklanja nepotrebne prefikse dobavljača, što nam je pomoglo da prepoznamo neke prašnjave kutove u našem CSS-u i proizvedemo manje kompilirane datoteke.

Dobra pouka iz našeg iskustva ovdje: Ne gubite vrijeme na pretvaranje ili refaktoriranje onoga što možete izbrisati.

Još jedna kombinacija razlike koju vrijedi napomenuti: Manje preporučuje razdvajanje parametara sa zarezom . Samo su nekoliko napisani na ovaj način, ali svi su morali biti promijenjeni, u mixin definicijama i tamo gdje su primijenjeni. Srećom, Less podržava i zarez i zarez, pa bismo tu promjenu mogli uvesti prije koraka pretvorbe.

Zlostavljanje ampersanda

Nakon obraćanja kombinacijama, skrenuli smo pažnju na drugi izvor pogrešaka u gradnji: ampersandi . Jedan je od najsnažnijih operatora i u Sassu i u Lessu, a rade vrlo slično. Osim kad nemaju. A onda rade vrlo različito.

Na primjer, s 19.000 selektora možete zamisliti da nailazimo na probleme sa specifičnostima, koji se često kao takvi brzo rješavaju:

Manje proizvodi h1.modal-header kako bi netko sumnjao, ali Sass se guši. Pokušali smo to popraviti sa:


kako dobiti više lajkova na instagramu bez hashtagova

Izvrsno funkcionira s Ruby Sass, ali od ovog pisanja, Libsass još ne podržava ovu upotrebu . Nismo ni razmišljali, u ovom slučaju, o prelasku na Ruby Sass. Umjesto toga napisali smo zaglavlje h1.modal izvan opsega .modal. Znamo da je ovo pokazatelj problema, pa izvlačenjem selektora iz opsega i pozivanjem s komentarom možemo lakše prepoznati te probleme u našem kodu.

Pogoršalo se kad se na ovaj način u smjesi upotrijebio ampersand. Evo izvatka Less mixina koji smo imali za gumbe:

Opet, direktiva @ at-root nije nam mogla pomoći u Libsassu. U ovom smo slučaju morali sagledati osnovni uzrok nadjačavanja specifičnosti i riješiti ga. (Dobra vijest je da smo to popravili brisanjem tri previše specifična stila negdje drugdje.)

Druga razlika između ampersanda Less i Sass zapravo je bila korisna:

Naša su očekivanja bila .checkbox-wrap> .checkbox-widget, .radio-wrap> .radio-widget. Međutim, Less obrađuje ampersand s više rekurzije i tako ga kompajlira:

Ni u jednom trenutku nismo - ili bismo htjeli - upotrijebili widget za potvrdni okvir za radio gumb. Srećom, Sass je zapravo riješio problem za koji nismo znali jer nismo gledali naš sastavljeni CSS.

Naučena lekcija: Često pogledajte svoj sastavljeni CSS - inače ne znate što korisnici preuzimaju.

Usporedba rezultata

Ažuriranja za popravak i uklanjanje mixina, rješavanje nepodudarnosti i znakova te rješavanje nekih drugih bitova koji se nisu pretvorili u čistu pretvorbu dogodila su se tijekom sedam izvršavanja tijekom mjeseca. Osjećaj je bio dobar za čišćenje kuće i prepoznavanje budućih prilika za preradu.

Ipak nije važno kako izgleda naš izvorni kod; računa se ono što se isporučuje našim korisnicima. Razmišljali smo o generiranju AST-ovi da usporedimo naš kompilirani CSS. Nakon nekih istraživanja i eksperimentiranja postalo je jasno da sve što trebamo bio je način da saznamo je li se vrlo malo promijenilo u sastavljenom CSS-u. Stoga bi bile dobre staromodne razlike - što je razlika manja, to bolje. Svaki zahtjev za povlačenjem dolazio je s razlikom prije i poslije rezultata kompilacije Less. Alat za razvojne programere Xcode FileMerge bilo je vrlo zgodno usporediti rezultate usporedo. Ako smo vidjeli nešto što nismo očekivali, vratili smo se u istragu.

Zaglavili smo s FileMergeom i diffsima nakon što smo prošli stampedo za pronalazak i zamjenu regularnih izraza i zapravo pretvorili datoteke u SCSS. Međutim, rezultati sastavljeni od dva različita pretprocesora učinili su naše razlike beskorisnima zbog razlika u tabuliranju i postavljanju zagrada. Dodali smo dodatni korak za normalizaciju formata CSS-a prije i poslije jednostavna skripta čvora . Umanjuje CSS, a zatim ga uljepšava. Ne može biti jednostavnije.

Normalizacija oblikovanja uvelike je pomogla, ali pročešljavanje razlike ipak je trajalo oko dva solidna dana pregleda. Proces nagrađivanja, ali naporan. Sumnjamo da bi prilagođeno AST rješenje pomoglo ubrzati pregled. Trebalo je riješiti sve razlike.

Ali razlike su bile male. Selektori u malo drugačijem redoslijedu, decimalno zaokruživanje i čak male razlike u rezultatima funkcija boja. Svaka razlika pažljivo je provjerena prije guranja našeg Sassed-up CSS-a u proizvodnju.

Što je sljedeće

Jednom spojeni, radovi u tijeku jedva su zastali. Manje datoteka koje su još u fazi izrade bilo je lako pretvoriti, zahvaljujući svim pripremnim radovima obavljenim prije vremena. Svi su bili u pogonu za otprilike dva dana. Čak je i redizajnirani tim za Compose uspio regeksirati svoj put do SCSS-a za nekoliko sati. Planiranje unaprijed i čišćenje postojećih stilova prije povlačenja prekidača učinili su sve razlike.

Sada idemo dalje s identificiranjem obrazaca, razbijanjem velikih CSS datoteka u module, revizijom CSS-a u proizvodnji za neiskorištene selektore i trošenjem više vremena na alate za usporedbu AST-ova ili nekog drugog raščlanjenog prikaza našeg CSS-a. Jesam li spomenuo da imamo gotovo 19 000 CSS selektora? Mi smo na tome - ali to je sasvim drugi članak.