Naše zkušenosti s přechodem od méně k Sass

O přechodu z vanilkového CSS na preprocesor CSS toho bylo napsáno hodně, a to z dobrého důvodu - preprocesory dodávají sílu a kontrolu, které v prohlížeči sami nezískáme. Z článků, které vychvalovat ctnosti preprocesoru k technickým přečtením, jako je Etsyho podrobný „ Přechod na SCSS v měřítku „Mám pocit, že jsem je všechny pohltil.

V HASHTAGS , udělali jsme něco, o čem se ještě tolik nepíše - přechod z jednoho preprocesoru na druhý. Sprout brzy přijal Méně ; koncem loňského roku jsme se rozhodli přejít na SCSS, syntaxi podobnou CSS Sass . Věnovali jsme čas tomu, abychom zajistili, že přechod proběhl hladce, a zkušenost zdůraznila některé hluboké rozdíly mezi Lessem a Sassem.

Proč?

Než se dostaneme k tomu, co jsme se dozvěděli, vaše první otázka - oprávněná - by měla být: „Proč se obtěžovat?“ Už jsme těžili z proměnných a mixinů, @importů a barevných funkcí. Jistě, Sass má řadu funkcí Méně postrádá, jako např mapy a funkce , ale bez nich jsme to dotáhli až sem.

Vynikají dva hlavní důvody pro přepnutí:

Společenství: Hledejte na githubu lib extension: scss, pak hledejte lib lib: less. V době psaní tohoto článku jsou výsledky jasné: 120 234 souborů SCSS, 29 449 souborů méně. Přepínání nabízí přístup k širší škále dobrých nápadů a většímu bazénu s otevřeným zdrojem k plavání. Dokonce i populární knihovna Bootstrap, jeden z důvodů, proč Less zůstal životaschopný, oznámil přechází na SCSS .
Rychlost: Libsass skály. Čas sestavení našich stylů se zlepšil o více než 500%. I když Libsass ještě nedohnal nejnovější verzi specifikace Sass, nemáme pocit, že by nám něco chybělo.

Jak?

Náš kompilovaný CSS má téměř 19 000 selektorů. Po přepnutí musel být kompilovaný CSS téměř totožný; museli jsme zajistit, aby byl tento přechod pro naše zákazníky neviditelný. A co funkce, které právě probíhají? Náš poslední aktualizace pro psaní změnil 3 837 řádků stylů - jak by mohl tento tým bezpečně přepnout na střední proud?

Zvažovali jsme tři možnosti:

Nejprve zkompilujte vše do CSS. Je to jediný způsob, jak zajistit se 100% přesností, že naši uživatelé dostávají stejné styly, a skutečně přepnout do jednoho dne. Myšlenka čisté přestávky je vždy lákavá, ale nový kód není vždy lepší kód . I s nástroji, jako je sass-převést a css2compass „čas, který bychom strávili přestavbou, by výrazně převažoval nad jinými možnostmi.
Nové styly zapisujte pouze do SCSS. Zvažovali jsme nakreslení čáry v písku - Méně je staré a zatčeno; Sass je nová žhavost . Nakonec jsme tuto představu odmítli. Okamžitým přepnutím by se získalo tolik a nikdo nechtěl udržovat paritu mezi dvěma sadami mixinů a proměnných.
Převeďte všechny naše soubory Méně na SCSS a opravte chyby. Tváří v tvář vyhodení historie nebo přidání dalšího úkolu sestavení k udržení jsme se pustili do převodu všeho.

Úklid domu

SCSS se neliší od Méně, že? ' Konverze z méně na Sass „Sdílí řadu regexových vyhledávání, která mění nejzřetelnější rozdíly v syntaxi, například .awesome-mixin () vs @mixin awesome-mixin (). Tato regexová vyhledávání jsou zahrnuta less2sass , kterou jsme prošli všemi našimi soubory.

Kdyby to bylo tak snadné, nebylo by toho opravdu o čem blogovat. Několik přetrvávajících požadavků na vyžádání skriptu less2sass zdůrazňují některé jeho přehledy, například rozdíly interpolace řetězců . Náročnější byly chyby sestavení, se kterými jsme se setkali po převodu, které zvýrazňovaly rozdíly větší, než jaký dokázal vyřešit jednoduchý regulární výraz. Upřímně řečeno, našli jsme také špatné CSS.

Vzali jsme tyto chyby sestavení a vytvořili seznam toho, co jsme potřebovali opravit, a věděli jsme, že většinu z nich můžeme opravit před převedením stylů. Před převodem jsme se rozhodli vyčistit naše méně soubory.

Fixin ‘Mixins

Začali jsme rozdílem mezi tím, jak Less a Sass zpracovávají podmíněné položky. Zde je jednoduchý gradientní mix, který jsme měli:

Sass nabízí jednoduchou strukturu @ if… @ else, zatímco náš mixin používal to, co Less volá a mixin stráž . V případě našeho přechodu mixin jsme jej použili k přechodu ze syntaxe konceptu předponou dodavatele na syntaxi W3C. Věděli jsme, že budeme muset tento mix přepsat.

Potom jsme se zastavili a dlouho jsme se podívali na všechny naše mixiny. Většina z nich přidala předpony dodavatelů a vyřešila rozdíly v prohlížeči, jako je například mix přechodu výše. Enter Autoprefixer , nástroj, který analyzuje CSS a aplikuje předpony dodavatelů na základě seznamu podporovaných prohlížečů. Přidáním Autoprefixeru do našeho sestavení jsme eliminovali devět mixinů. Jako bonus Autoprefixer odstraňuje nepotřebné předpony dodavatelů, což nám pomohlo identifikovat některé zaprášené rohy v našem CSS a vytvářet menší kompilované soubory.

Dobré poučení z našich zkušeností zde: Neztrácejte čas přeměnou nebo refaktorováním toho, co můžete smazat.

Další rozdíl v mixování, který stojí za zmínku: Méně doporučuje oddělit parametry středníky . Takto bylo napsáno jen několik, ale všechny musely být změněny, v definicích mixinu a kde byly použity. Less naštěstí podporuje středníky i čárky, takže jsme tuto změnu mohli provést před krokem převodu.

1 symbolický význam

Ampersand Abuse

Po adresování mixinů jsme obrátili naši pozornost k dalšímu zdroji chyb sestavení: ampersandy . Je to jeden z nejsilnějších operátorů v Sass i Less a fungují velmi podobně. Kromě případů, kdy tomu tak není. A pak fungují velmi odlišně.

Například s 19 000 selektory si dokážete představit, že narazíme na problémy se specifičností, které jsou často rychle vyřešeny jako takové:

Méně vytváří h1.modal-header, jak by se dalo předpokládat, ale Sass se dusí. Zkusili jsme to opravit pomocí:

Funguje skvěle s Ruby Sass, ale od tohoto psaní Libsass toto použití zatím nepodporuje . V tomto případě jsme ani neuvažovali o přechodu na Ruby Sass. Namísto toho jsme napsali h1.modal-header mimo rámec .modal. Víme, že se jedná o indikaci problému, takže vytažením voliče z rozsahu a jeho vyvoláním s komentářem můžeme tyto problémy v našem kódu snáze identifikovat.

Zhoršilo se to, když byl takto použit ampersand v mixinu. Zde je výňatek z Mixinu, který jsme měli pro tlačítka:

Směrnice @ at-root nám v Libsassu nemohla pomoci. V tomto případě jsme se museli podívat na hlavní příčinu přepsání specificity a vyřešit ji. (Dobrá zpráva je, že jsme to napravili odstraněním tří příliš specifických stylů jinde.)

Další rozdíl mezi ampersandy Less a Sass byl ve skutečnosti užitečný:

Naše očekávání bylo .checkbox-wrap> .checkbox-widget, .radio-wrap> .radio-widget. Less však zpracovává ampersand s větší rekurzí a kompiloval se takto:

V žádném okamžiku jsme - nebo bychom - nepoužili widget pro zaškrtávací políčko pro přepínací tlačítko. Naštěstí Sass skutečně vyřešil problém, o kterém jsme nevěděli, protože jsme se nedívali na náš kompilovaný CSS.

Ponaučení: Podívejte se často na své kompilované CSS - jinak nevíte, co stahují vaši uživatelé.

Porovnání výsledků

Aktualizace k opravě a odebrání mixinů, řešení nesrovnalostí a nesrovnalostí a řešení některých dalších bitů, které se nebudou čistě převádět, proběhly v průběhu měsíce u sedmi závazků. Bylo příjemné vyčistit dům a identifikovat budoucí příležitosti refaktoringu.

Přesto nezáleží na tom, jak vypadá náš zdrojový kód; počítá se s tím, co se dostane k našim uživatelům. Zvažovali jsme generování AST porovnat naše kompilované CSS. Po nějakém výzkumu a experimentování vyšlo najevo, že vše, co jsme potřebovali, byl způsob, jak zjistit, zda se v kompilovaném CSS změnilo jen velmi málo. Stačily by tedy dobré staromódní rozdíly - čím menší rozdíl, tím lépe. Každá žádost o přijetí přišla s rozdílem před a po výsledcích kompilace Less. Nástroj pro vývojáře Xcode FileMerge bylo velmi užitečné porovnat výsledky bok po boku. Pokud jsme viděli něco, co jsme nečekali, vrátili jsme se vyšetřovat.

Jakmile jsme se vydali na náš regex najít a nahradit paniku a skutečně převést soubory na SCSS, uvízli jsme s FileMerge a diffs. Avšak výsledky zkompilované dvěma různými preprocesory způsobily, že naše rozdíly byly nepoužitelné kvůli rozdílům v tabulátorech a umístění závorek. Přidali jsme další krok k normalizaci formátu CSS před a po jednoduchý skript uzlu . Minifikuje CSS a poté jej zkrášluje. Nemůže to být jednodušší.

Normalizace formátování velmi pomohla, ale česání přes rozdíl stále trvalo asi dva solidní dny kontroly. Proces odměňování, ale náročný. Pochybujeme, že by vlastní řešení AST pomohlo urychlit kontrolu. Všechny rozdíly musely být vyřešeny.

Rozdíly však byly malé. Selektory v mírně odlišném pořadí, desetinné zaokrouhlování a dokonce i malé rozdíly ve výsledcích barevných funkcí. Každý rozdíl byl pečlivě zkontrolován, než jsme spustili produkci našeho Sassed-up CSS.

Co bude dál

Po sloučení se probíhající práce stěží zastavila. Méně souborů, které jsou stále ve vývoji, bylo snadné převést, a to díky veškeré přípravné práci provedené předem. Všichni byli v provozu asi za dva dny. Dokonce i přepracovaný tým Compose dokázal během několika hodin regexovat cestu k SCSS. Plánování dopředu a vyčištění stávajících stylů před stažením přepínače přineslo velký rozdíl.

Nyní pokračujeme v identifikaci vzorů, rozbíjíme velké soubory CSS na moduly, kontrolujeme CSS ve výrobě pro nevyužité selektory a trávíme více času nástroji pro srovnání AST nebo nějakého jiného analyzovaného zastoupení našeho CSS. Zmínil jsem, že máme téměř 19 000 selektorů CSS? Jsme na tom - ale to je úplně jiný článek.

Sdílej Se Svými Přáteli: