Mazāk-Sass-Switch-01

Daudz ir rakstīts par pāreju no vaniļas CSS uz CSS priekšapstrādātāju, un laba iemesla dēļ - priekšapstrādes procesori papildina enerģiju un vadību, ko mēs nevaram iegūt tikai pārlūkprogrammā. No rakstiem, kas cildināt pirmapstrādātāja tikumus tehniskākiem lasījumiem, piemēram, Etsy detalizētajam Pāreja uz SCSS mērogā , ”Es jūtu, ka esmu viņus visus aprijusi.





Plkst HASHTAGS , mēs izdarījām kaut ko tādu, par ko nav rakstīts gandrīz tikpat daudz - pārslēdzoties no viena priekšapstrādes procesora uz citu. Agri Sprout pieņēma Mazāk ; pagājušā gada beigās mēs pieņēmām lēmumu pāriet uz SCSS, CSS līdzīgo sintaksi Sass . Mēs veltījām laiku, lai nodrošinātu, ka pāreja ir vienmērīga, un pieredze parādīja dažas dziļas atšķirības starp Less un Sass.



Kāpēc?

Pirms mēs nonākam pie tā, ko mēs iemācījāmies, jūsu pirmajam jautājumam - pamatotam - vajadzētu būt: 'Kāpēc jāuztraucas?' Mēs jau guvām labumu no mainīgajiem un miksiem, @import un krāsu funkcijām. Protams, Sass ir vairākas funkcijas, kurām mazāk trūkst, piemēram, kartes un funkcijas , bet mēs tik tālu tikām bez viņiem.



Izceļas divi galvenie pārslēgšanās iemesli:

  1. Kopiena: Github meklējiet lib paplašinājumu: scss, pēc tam meklējiet lib paplašinājumu: mazāk. Kopš šī raksta, rezultāti ir skaidri: 120 234 SCSS faili, 29 449 mazāk failu. Pārslēgšanās piedāvā piekļuvi plašākam labu ideju klāstam un lielākam atvērtā koda baseinam, kur peldēties. Paziņojusi pat populārā Bootstrap bibliotēka, kas ir viens no iemesliem, kāpēc Less ir saglabājies dzīvotspējīgs tā pāriet uz SCSS .
  2. Ātrums: Libsass ieži. Mūsu stilu izveides laiks uzlabojās par vairāk nekā 500%. Kaut arī Libsass vēl nav panācis jaunāko Sass spec versiju, mēs nejūtamies, ka mums kaut kas pietrūkst.

Kā?

Mūsu apkopotajā CSS ir gandrīz 19 000 atlasītāju. Pēc pārslēgšanās šim apkopotajam CSS bija jābūt gandrīz identiskam; mums bija jānodrošina, lai šī pāreja būtu neredzama mūsu klientiem. Un kā ar pašlaik notiekošajām funkcijām? Mūsu nesen sastādīt atjauninājumu mainītas 3837 stilu līnijas - kā šī komanda varēja droši pārslēgties pa vidu?

Mēs apsvērām trīs iespējas:



  1. Vispirms apkopojiet visu CSS. Tas ir vienīgais veids, kā ar 100% precizitāti nodrošināt, ka mūsu lietotāji iegūst vienādus stilus, un faktiski vienu dienu pārslēgt slēdzi. Ideja par tīru pārtraukumu vienmēr ir vilinoša, bet jauns kods ne vienmēr ir labāks kods . Pat ar tādiem rīkiem kā sass-pārvērst un css2compass , laiks, ko mēs pavadīsim atjaunošanai, ievērojami atsvērtu citas iespējas.
  2. Rakstiet jaunus stilus tikai SCSS. Mēs apsvērām iespēju novilkt līniju smiltīs - Mazāk ir vecs un izpostīts; Sass ir jaunais karstums . Galu galā mēs noraidījām šo jēdzienu. Tūlītēja pāreja ļaus iegūt tik daudz, un neviens nevēlējās saglabāt paritāti starp diviem miksu un mainīgo kopumiem.
  3. Konvertējiet visus mūsu mazāk failus uz SCSS un novērsiet pārtraukumus. Saskaroties vai nu ar vēstures izsviešanu, vai arī pievienojot citu uzturēšanas uzdevumu, mēs sākām visu pārveidot.

Tīrīšanas nams

SCSS neatšķiras no Less, vai ne? “ Konvertēšana no Less uz Sass ”Dalās ar regulāru meklējumu sēriju, lai mainītu visredzamākās sintakses atšķirības, piemēram, .awesome-mixin () vs @mixin awesome-mixin (). Šie regex meklējumi tiek apkopoti mazāk2sass , kuru mēs izlaidām caur visiem mūsu failiem.



Tomēr, ja tas būtu tik vienkārši, nebūtu daudz ko blogot. Daži ieilgušie pieprasījumi uz skriptu less2sass uzsver dažus tā nepieļaušanas gadījumus, piemēram, virkņu interpolācijas atšķirības . Sarežģītākas bija būvēšanas kļūdas, ar kurām mēs saskārāmies pēc reklāmguvuma, kas uzsvēra atšķirības, kas lielākas nekā vienkārša regex varētu atrisināt. Ja godīgi, mēs atradām arī dažus sliktus CSS.

Mēs ņēmām šīs būvēšanas kļūdas un izveidojām sarakstu ar to, kas mums jālabo, un pirms stilu konvertēšanas zinājām, ka lielāko daļu varam novērst. Pirms konvertēšanas mēs nolēmām iztīrīt mūsu mazāk failus.



Fixin ’Mixins

Mēs sākām ar atšķirību starp to, kā Less un Sass izturas pret nosacījumiem. Šeit ir vienkāršs gradienta maisījums, kas mums bija:



Sass piedāvā vienkāršu @ if… @ struktūru, turpretī mūsu mixin izmantoja to, ko Less sauc par a mixin aizsargs . Mūsu gradienta sajaukuma gadījumā mēs to izmantojām, lai no piegādātāja prefiksēta melnraksta sintakses mainītos uz W3C sintaksi. Mēs zinājām, ka mums būs jāpārraksta šis miksins.



Tad mēs apstājāmies un ilgi apskatījām visus mūsu miksus. Lielākā daļa no viņiem pievienoja piegādātāja prefiksus un atrisināja pārlūkprogrammas atšķirības, piemēram, iepriekš minēto gradienta maisījumu. Enter Automātiskais labotājs , rīks, kas parsē CSS un lieto piegādātāja prefiksus, pamatojoties uz atbalstīto pārlūkprogrammu sarakstu. Pievienojot Autoprefixer savai konstrukcijai, mēs izslēdzām deviņus miksus. Kā bonuss Autoprefixer noņem nevajadzīgos pārdevēju prefiksus, kas mums palīdzēja noteikt dažus putekļainus stūrus mūsu CSS un izveidot mazākus kompilētus failus.

Laba mācība no mūsu pieredzes šeit: netērējiet laiku, pārveidojot vai atjaunojot to, ko varat izdzēst.

Vēl viena ievērības cienīga atšķirība: Less iesaka parametrus atdalīt ar semikoliem . Šādi tika uzrakstīti tikai daži, bet tie visi bija jāmaina, mixin definīcijās un vietās, kur tie tika izmantoti. Par laimi, Less atbalsta gan semikolus, gan komatus, tāpēc mēs varētu veikt šīs izmaiņas pirms reklāmguvuma darbības.


22 nozīmē eņģelis

Ampersanda ļaunprātīga izmantošana

Pēc tam, kad pievērsāmies miksiem, mēs pievērsām uzmanību citam būvēšanas kļūdu avotam: ampersands . Tas ir viens no jaudīgākajiem operatoriem gan Sass, gan Less, un viņi strādā ļoti līdzīgi. Izņemot gadījumus, kad viņi to nedara. Un tad viņi strādā ļoti atšķirīgi.

Piemēram, ar 19 000 atlasītājiem jūs varat iedomāties, ka mums rodas specifiskuma problēmas, kuras bieži tiek ātri atrisinātas:

Mazāk ražo h1.modal-header, kā varētu domāt, bet Sass aizrīties. Mēs mēģinājām to novērst ar:

Lieliski darbojas kopā ar Rubīnu Sasu, taču šī raksta laikā Libsass vēl neatbalsta šo lietojumu . Šajā gadījumā mēs pat neiedomājāmies pāriet uz Ruby Sass. Tā vietā mēs izrakstījām h1.modal-header ārpus domēna .modal darbības jomas. Mēs zinām, ka tā norāda uz problēmu, tāpēc, izraujot selektoru no darbības sfēras un izsaucot to ar komentāru, mēs vieglāk varam noteikt šīs problēmas mūsu kodā.

Tas kļuva vēl sliktāk, ja mikserī šādā veidā izmantoja dzelteno zīmi. Šeit ir izvilkums no mazāk sajaukuma, kas mums bija pogām:

Atkal @ at-root direktīva nevarēja mums palīdzēt Libsass. Šajā gadījumā mums nācās aplūkot specifikas ignorēšanas pamatcēloņu un to atrisināt. (Labā ziņa ir tā, ka mēs to labojām, izdzēšot trīs pārāk specifiskus stilus citur.)

Faktiski noderēja vēl viena atšķirība starp Less un Sass un:

Mūsu cerības bija .checkbox-wrap> .checkbox-widget, .radio-wrap> .radio-widget. Tomēr Less apstrādā zīmi ar lielāku rekursiju un apkopo šādi:

Nevienā brīdī mēs radio pogai neizmantojām izvēles rūtiņas logrīku - vai arī mēs to darītu. Par laimi, Sass faktiski atrisināja problēmu, par kuru mēs nezinājām, jo ​​mēs neskatījāmies uz mūsu apkopoto CSS.

Gūtā mācība: bieži apskatiet savu apkopoto CSS, pretējā gadījumā jūs nezināt, ko lietotāji lejupielādē.

Rezultātu salīdzināšana

Atjauninājumi, lai izlabotu un noņemtu miksus, atrisinātu atšķirības un atšķirības un novērstu dažus citus bitus, kas netika pārveidoti tīri, mēneša laikā tika veikti septiņās saistībās. Bija patīkami sakopt māju un noteikt turpmākās pārstrādes iespējas.

Tomēr nav svarīgi, kā izskatās mūsu pirmkods; Ir svarīgi, kas tiek piegādāts mūsu lietotājiem. Mēs apsvērām iespēju ģenerēt AST lai salīdzinātu mūsu apkopoto CSS. Pēc dažiem pētījumiem un eksperimentiem kļuva skaidrs, ka viss, kas mums vajadzīgs, ir veids, kā uzzināt, vai apkopotajā CSS ir mainījies ļoti maz. Tāpēc pietiktu ar vecmodīgiem diffiem - jo mazāks diffs, jo labāk. Katram izvilkšanas pieprasījumam bija atšķirība no mazāk un mazāk apkopoto rezultātu pirms un pēc. Xcode izstrādātāja rīks FileMerge bija ļoti ērti salīdzināt rezultātus blakus. Ja mēs redzējām kaut ko tādu, ko negaidījām, mēs atgriezāmies izmeklēšanā.

Mēs palikuši pie FileMerge un diffs, kad mēs devāmies uz mūsu regex atrast un nomainīt spiedienu un faktiski konvertējām failus uz SCSS. Tomēr divu dažādu priekšapstrādātāju apkopotie rezultāti padarīja mūsu diffusus nederīgus, jo atšķirības bija lentu un kronšteinu izvietojumā. Mēs pievienojām papildu darbību, lai normalizētu pirms un pēc CSS formātu ar vienkāršs mezgla skripts . Tas samazina CSS, pēc tam to izdaiļo. Nevar būt vienkāršāk.

Formatēšanas normalizēšana ļoti palīdzēja, taču atšķirības ķemmēšana joprojām prasīja apmēram divas pamatīgas pārskatīšanas dienas. Atalgojošs process, bet grūts. Mēs šaubāmies, vai pielāgots AST risinājums būtu palīdzējis pārskatīšanu paātrināt. Bija jārisina visas atšķirības.

Bet atšķirības bija nelielas. Selektori nedaudz atšķirīgā secībā, aiz komata noapaļoti un pat nedaudz atšķirīgi krāsu funkciju rezultātos. Katra atšķirība tika rūpīgi pārbaudīta pirms mūsu Sassed-up CSS ieviešanas ražošanā.

Ko tālāk

Pēc apvienošanas nepabeigtais darbs gandrīz neuzkavējās. Pateicoties visiem pirms laika paveiktajiem sagatavošanās darbiem, mazāk pārveidojamo failu bija viegli pārveidot. Aptuveni divu dienu laikā visi bija gatavi darboties. Pat pārveidotā Compose komanda dažu stundu laikā spēja atjaunot ceļu uz SCSS. Plānošana uz priekšu un esošo stilu sakopšana pirms slēdža vilkšanas radīja visu atšķirību.

Tagad mēs turpinām identificēt modeļus, sadalīt lielus CSS failus moduļos, pārbaudīt CSS ražošanā neizmantotajiem atlasītājiem un tērēt vairāk laika rīkiem, lai salīdzinātu AST vai kādu citu mūsu CSS parsētu attēlojumu. Vai es pieminēju, ka mums ir gandrīz 19 000 CSS atlasītāju? Mēs esam pie tā, bet tas ir vēl viens raksts.

Dalieties Ar Draugiem: