Less-Sass-Switch-01

Er is veel geschreven over het overschakelen van vanilla CSS naar een CSS-preprocessor, en niet voor niets: preprocessors voegen kracht en controle toe die we niet alleen in de browser kunnen krijgen. Van artikelen die verheerlijk de deugden van een preprocessor voor meer technische teksten, zoals Etsy's gedetailleerde ' Overstappen naar SCSS op schaal , 'Ik heb het gevoel dat ik ze allemaal heb verslonden.





Bij HASHTAGS , hebben we iets gedaan waarover bijna niet zoveel is geschreven: overgaan van de ene preprocessor naar de andere. Al vroeg adopteerde Sprout Minder ​we hebben eind vorig jaar de beslissing genomen om over te schakelen naar SCSS, de CSS-achtige syntaxis van Sass ​We hebben de tijd genomen om ervoor te zorgen dat de overgang soepel verliep, en de ervaring bracht enkele diepe verschillen tussen Less en Sass aan het licht.



Waarom?

Voordat we ingaan op wat we hebben geleerd, zou uw eerste vraag - een legitieme - moeten zijn: 'Waarom moeite doen?' We hebben al geprofiteerd van variabelen en mixins, @imports en kleurfuncties. Zeker, Sass heeft een aantal features die Less mist, zoals kaarten en functies , maar we zijn zo ver gekomen zonder hen.



Twee belangrijke redenen om over te stappen vallen op:

  1. Gemeenschap: Zoek in github naar lib-extensie: scss en zoek vervolgens naar lib-extensie: less. Op het moment van schrijven zijn de resultaten duidelijk: 120.234 SCSS-bestanden, 29.449 minder bestanden. Overstappen biedt toegang tot een breder scala aan goede ideeën en een grotere open-source pool om in te zwemmen. Zelfs de populaire Bootstrap-bibliotheek, een van de redenen waarom Less levensvatbaar is gebleven, heeft aangekondigd het schakelt over naar SCSS
  2. Snelheid: Libsass rotsen. De bouwtijd voor onze stijlen is met meer dan 500% verbeterd. Hoewel Libsass de nieuwste versie van de Sass-specificatie nog niet heeft ingehaald, hebben we niet het gevoel dat we iets missen.

Hoe?

Onze gecompileerde CSS heeft bijna 19.000 selectors. Na de switch moest die gecompileerde CSS bijna identiek zijn; we moesten ervoor zorgen dat deze overgang onzichtbaar was voor onze klanten. En hoe zit het met functies die momenteel worden uitgevoerd? Onze recente opstelupdate veranderde 3837 stijlen - hoe kon dat team veilig midstream wisselen?

We hebben drie opties overwogen:



  1. Compileer eerst alles naar CSS. Het is de enige manier om er met 100% nauwkeurigheid voor te zorgen dat onze gebruikers dezelfde stijlen krijgen en om de schakelaar in één dag daadwerkelijk uit te schakelen. Het idee van een schone pauze is altijd aanlokkelijk, maar nieuwe code is niet altijd betere code ​Zelfs met tools zoals sass-convert en css2compass , zou de tijd die we zouden besteden aan de wederopbouw veel zwaarder wegen dan alle andere opties.
  2. Schrijf alleen nieuwe stijlen in SCSS. We overwogen om een ​​lijn in het zand te trekken- Less is oud en kapot; Sass is de nieuwe hotness ​Uiteindelijk hebben we dit idee afgewezen. Er zou zoveel worden gewonnen door onmiddellijk over te schakelen, en niemand wilde de pariteit tussen twee sets mixins en variabelen behouden.
  3. Converteer al onze Less-bestanden naar SCSS en repareer wat er kapot gaat. Geconfronteerd met het weggooien van de geschiedenis of het toevoegen van een andere build-taak om te onderhouden, begonnen we alles te converteren.

Huis schoonmaken

SCSS verschilt niet zo veel van Less, toch?​ Omzetten van Less naar Sass ”Deelt een reeks regex-zoekopdrachten om de meest voor de hand liggende syntaxisverschillen te veranderen, zoals .awesome-mixin () versus @mixin awesome-mixin (). Die regex-zoekopdrachten zijn samengevoegd in less2sass , die we al onze bestanden hebben doorgenomen.



Als het echter zo gemakkelijk zou zijn, zou er niet veel zijn om over te bloggen. Een paar slepende pull-verzoeken aan het less2sass-script benadrukken enkele van zijn vergissingen, zoals verschillen tussen stringinterpolatie ​Uitdagender waren de build-fouten die we tegenkwamen na de conversie, die verschillen aantoonden die groter waren dan een eenvoudige regex kon oplossen. Om eerlijk te zijn, hebben we ook enkele slechte CSS gevonden.

We hebben die build-fouten genomen en een lijst gemaakt van wat we moesten repareren, en we wisten dat we het meeste konden repareren voordat we de stijlen converteerden. We hebben besloten om onze Less-bestanden op te schonen voordat we converteren.



Fixin ’Mixins

We zijn begonnen met het verschil tussen hoe Less en Sass met conditionals omgaan. Hier is een eenvoudige verloopmix die we hadden:



Sass biedt een eenvoudige @ if ... @ else-structuur, terwijl onze mixin gebruik maakte van wat Less een mixin bewaker ​In het geval van onze gradiëntmixin, gebruikten we deze om van de door de leverancier vooraf ingestelde concept-syntaxis naar de W3C-syntaxis over te schakelen. We wisten dat we deze mix moesten herschrijven.



Toen stopten we en keken al onze mixins lang. De meesten van hen voegden voorvoegsels van leveranciers toe en loste browserverschillen op, zoals de verloopmix hierboven. Enter Autoprefixer , een tool die CSS parseert en prefixen van leveranciers toepast op basis van een lijst met ondersteunde browsers. Door Autoprefixer aan onze build toe te voegen, hebben we negen mixins geëlimineerd. Als bonus verwijdert Autoprefixer onnodige prefixen van leveranciers, waardoor we enkele stoffige hoekjes in onze CSS konden identificeren en kleinere gecompileerde bestanden konden produceren.

Een goede les uit onze ervaring hier: verspil geen tijd aan het converteren of herstructureren van wat u kunt verwijderen.

Een ander mixin-verschil dat het vermelden waard is: Less raadt aan om parameters te scheiden met puntkomma's ​Er waren er maar een paar op deze manier geschreven, maar ze moesten allemaal worden gewijzigd, in de mixin-definities en waar ze werden toegepast. Gelukkig ondersteunt Less zowel puntkomma's als komma's, dus we konden deze wijziging aanbrengen vóór de conversiestap.


wat is de 212

Ampersand misbruik

Nadat we mixins hadden aangepakt, hebben we onze aandacht gevestigd op een andere bron van build-fouten: ampersands ​Het is een van de krachtigste operators in zowel Sass als Less, en ze werken op dezelfde manier. Behalve als ze dat niet doen. En dan werken ze heel anders.

Met 19.000 selectors kun je je bijvoorbeeld voorstellen dat we tegen specificiteitsproblemen aanlopen, vaak snel als zodanig opgelost:

Less produceert h1.modal-header zoals je zou vermoeden, maar Sass verslikt zich. We hebben geprobeerd het te repareren met:

Werkt prima met Ruby Sass, maar vanaf dit moment, Libsass ondersteunt dit gebruik nog niet ​We hebben in dit geval niet eens overwogen om over te schakelen naar Ruby Sass. In plaats daarvan hebben we h1.modal-header buiten het bereik van .modal geschreven. We weten dat dit een indicatie is van een probleem, dus door de selector uit de scope te trekken en met een opmerking te roepen, kunnen we die problemen gemakkelijker in onze code identificeren.

Het werd erger als een ampersand op deze manier in een mixin werd gebruikt. Hier is een fragment van een Less-mix die we hadden voor knoppen:

Nogmaals, de @ at-root-richtlijn kon ons niet helpen in Libsass. In dit geval moesten we kijken naar de hoofdoorzaak van de specificiteitsoverschrijving en deze oplossen. (Het goede nieuws is dat we het probleem hebben opgelost door drie overdreven specifieke stijlen elders te verwijderen.)

Een ander verschil tussen Less en Sass ampersands was eigenlijk nuttig:

Onze verwachting was .checkbox-wrap> .checkbox-widget, .radio-wrap> .radio-widget. Less verwerkt echter het ampersand met meer recursie en is als volgt samengesteld:

Op geen enkel moment hebben we - of zouden we - een checkbox-widget voor een keuzerondje gebruiken. Gelukkig heeft Sass een probleem opgelost dat we niet kenden omdat we niet naar onze gecompileerde CSS keken.

Geleerde les: kijk vaak naar uw gecompileerde CSS, anders weet u niet wat uw gebruikers downloaden.

Vergelijking van de resultaten

De updates om mixins te repareren en te verwijderen, ampersand-discrepanties op te lossen en enkele andere bits aan te pakken die niet netjes zouden worden omgezet, vonden plaats in zeven commits in de loop van een maand. Het voelde goed om het huis schoon te maken en toekomstige herstructureringsmogelijkheden te identificeren.

Toch maakt het niet uit hoe onze broncode eruitziet; het is wat er aan onze gebruikers wordt geleverd dat telt. We hebben overwogen om te genereren AST's om onze gecompileerde CSS te vergelijken. Na wat onderzoek en experimenten werd het duidelijk dat we alleen een manier nodig hadden om te weten of er heel weinig was veranderd in de gecompileerde CSS. Daarom zouden ouderwetse diffs voldoende zijn - hoe kleiner het diff, hoe beter. Elk pull-verzoek kwam met een diff van de voor-en-na-resultaten van de Less-compilatie. De Xcode-ontwikkelaarstool FileMerge was erg handig om resultaten naast elkaar te vergelijken. Als we iets zagen dat we niet hadden verwacht, gingen we terug om het te onderzoeken.

We bleven bij FileMerge en diffs toen we op onze reguliere zoek-en-vervang-stormloop gingen en de bestanden daadwerkelijk naar SCSS converteerden. De resultaten die door twee verschillende preprocessors zijn verzameld, maakten onze verschillen echter onbruikbaar vanwege verschillen in tabbing en bracketplaatsing. We hebben een extra stap toegevoegd om het formaat van de voor-en-na CSS te normaliseren met een eenvoudig knooppuntscript ​Het verkleint de CSS en verfraait het vervolgens. Makkelijker kan niet.

Het normaliseren van de opmaak hielp enorm, maar het doorzoeken van de diff kostte nog steeds ongeveer twee solide dagen van reviseren. Een dankbaar proces maar zwaar. We betwijfelen of een aangepaste AST-oplossing de beoordeling zou hebben versneld. Alle verschillen moesten worden aangepakt.

Maar de verschillen waren klein. Selectors in een iets andere volgorde, decimale afronding en zelfs kleine verschillen in de resultaten van kleurfuncties. Elk verschil werd zorgvuldig gecontroleerd voordat onze Sassed-up CSS in productie werd genomen.

Wat is het volgende

Eenmaal samengevoegd, liep het lopende werk nauwelijks vast. Minder bestanden die nog in ontwikkeling waren, waren gemakkelijk te converteren, dankzij al het voorbereidende werk dat van tevoren werd gedaan. Binnen ongeveer twee dagen was iedereen aan de slag. Zelfs het opnieuw ontworpen Compose-team was in staat om binnen een paar uur weer naar SCSS te gaan. Vooruit plannen en bestaande stijlen opschonen voordat u aan de schakelaar trok, maakte het verschil.

Nu gaan we verder met het identificeren van patronen, het opdelen van grote CSS-bestanden in modules, het controleren van CSS in productie voor ongebruikte selectors en besteden meer tijd aan tools om AST's of een andere geparseerde weergave van onze CSS te vergelijken. Had ik al gezegd dat we bijna 19.000 CSS-selectors hebben? We staan ​​erop, maar dat is een heel ander artikel.

Deel Het Met Je Vrienden: