Наше искуство пребацивање са мање на Сасс

Пуно је писано о преласку са ванилин ЦСС-а на ЦСС претпроцесор, и са добрим разлогом - претпроцесори додају снагу и контролу коју не можемо добити само у прегледачу. Из чланака који величајте врлине претпроцесора на више техничких читања попут Етсијевог детаљног „ Прелазак на СЦСС у скали , ”Осећам се као да сам их све прогутао.

У ХАСХТАГС , урадили смо нешто о чему још увек није написано приближно толико - пребацивање са једног претпроцесора на други. Рано је усвојио Спроут Мање ; донели смо одлуку крајем прошле године да пређемо на СЦСС, синтаксу налик ЦСС-у Сасс . Одвојили смо време да осигурамо да је транзиција била глатка, а искуство је нагласило неке дубоке разлике између Лесса и Сасса.

Зашто?

Пре него што дођемо до онога што смо научили, ваше прво легитимно питање требало би да буде „Зашто се мучити?“ Већ смо имали користи од променљивих и комбинација, увоза и функција боја. Свакако, Сасс има бројне функције које мање недостају, као што су карте и функције , али стигли смо тако далеко без њих.

Издвајају се два главна разлога за прелазак:

Заједница: Претражите гитхуб за проширење либ: сцсс, а затим потражите проширење либ: мање. Од писања овог текста, резултати су јасни: 120.234 СЦСС датотека, 29.449 датотека мање. Пребацивање нуди приступ ширем низу добрих идеја и већем базену отвореног кода за пливање. Чак је и популарна библиотека Боотстрап, један од разлога због којих је Лесс остао одржив, најавила прелази се на СЦСС .
Брзина: Либсасс стене. Време израде наших стилова побољшало се за преко 500%. Иако Либсасс још није стигао најновију верзију спецификације Сасс, не осећамо да нам нешто недостаје.

Како?

Наш компајлирани ЦСС има скоро 19.000 селектора. Након преласка, тај компајлирани ЦСС требао је бити готово идентичан; морали смо осигурати да овај прелаз буде невидљив за наше купце. А шта је са функцијама које су тренутно у току? Наше недавно ажурирање састављања променио 3.837 линија стилова - како је тај тим могао безбедно да се пребаци у средњи ток?

Размотрили смо три могућности:

Прво компајлирајте све у ЦСС. То је једини начин да са 100% прецизношћу обезбедимо да су наши корисници добили исте стилове и да заиста повучемо прекидач у једном дану. Идеја о чистој паузи увек мами, али нови код није увек бољи код . Чак и са алатима као што су сасс-цонверт и цсс2цомпасс , време које бисмо провели у обнови увелико би надмашило било коју другу могућност.
У СЦСС пишите само нове стилове. Размишљали смо о цртању линије у песку - Мање је старо и уништено; Сасс је нова врућина . На крају смо одбацили овај појам. Толико би се добило пребацивањем одмах и нико није желео да одржи паритет између два скупа комбинација и променљивих.
Претворите све наше датотеке мање у СЦСС и поправите шта се ломи. Суочени са избацивањем историје или додавањем другог задатка израде ради одржавања, приступили смо претварању свега.

Кућа за чишћење

СЦСС се не разликује толико од Лесс, зар не? „ Конвертовање из Лесс у Сасс ”Дели низ претраживања регуларних израза како би променио најочигледније разлике у синтакси, као што су .авесоме-микин () вс @микин авесоме-микин (). Те претраге регуларних израза су уврштене у лесс2сасс , коју смо прегледали кроз све наше датотеке.

Да је то тако лако, заиста не би било пуно тога о чему би писали. Неколико дуготрајних захтева за повлачењем скрипте лесс2сасс наглашава неке од његових превида, као што је разлике у интерполацији низа . Изазовније су биле грешке у изградњи на које смо наишли након конверзије, што је истакло разлике веће него што би обични регуларни израз могао да реши. Искрено речено, нашли смо и неки лош ЦСС.

Узели смо те грешке у састављању и направили списак онога што је требало да поправимо и знали смо да већину тога можемо да поправимо пре конверзије стилова. Одлучили смо да очистимо наше мање датотеке пре конверзије.

Фикин ’Микинс

Почели смо са разликом између тога како се Лесс и Сасс понашају према условним условима. Ево једноставног градијентног микса који смо имали:

Сасс нуди једноставну структуру @ иф ... @ елсе, док је наша комбинација користила оно што Лесс назива а микин чувар . У случају нашег градијентног микса, користили смо га за прелазак са синтаксе радне верзије са префиксом добављача на синтаксу В3Ц. Знали смо да ћемо морати да препишемо овај миксин.

Затим смо застали и дуго погледали све своје комбинације. Већина њих је додала префиксе добављача и решила разлике у прегледачу као што је горњи градијент. Ентер Аутопрефикер , алатка која рашчлањује ЦСС и примењује префиксе добављача на основу листе подржаних прегледача. Додавањем Аутопрефикер-а у нашу верзију, елиминисали смо девет комбинација. Као бонус, Аутопрефикер уклања непотребне префиксе добављача, што нам је помогло да препознамо неке прашњаве углове у нашем ЦСС-у и произведемо мање компајлиране датотеке.

Добра лекција из нашег искуства овде: Не губите време на претварање или рефакторирање онога што можете избрисати.

Још једна комбинација разлике вредна пажње: Мање препоручује раздвајање параметара тачком и зарезом . Само неколико је написано на овај начин, али све је требало променити, у миксин дефиницијама и тамо где су примењени. Срећом, Лесс подржава и зарез и зарез, тако да бисмо ову промену могли извршити пре корака конверзије.

духовно значење 47

Амперсанд Абусе

Након обраћања комбинацијама, усмерили смо пажњу на још један извор грешака у изградњи: амперсанди . То је један од најмоћнијих оператора у Сасс-у и Лесс-у, и они раде врло слично. Осим када немају. А онда раде сасвим другачије.

На пример, са 19.000 селектора можете да замислите да наилазимо на проблеме са специфичностима, који се често брзо решавају као такви:

Мање производи х1.модал-хеадер како би неко сумњао, али Сасс се гуши. Покушали смо да га поправимо са:

Одлично функционише са Руби Сасс, али од овог писања, Либсасс још увек не подржава ову употребу . У овом случају нисмо ни размишљали о преласку на Руби Сасс. Уместо тога, исписали смо заглавље х1.модал изван опсега .модал. Знамо да је ово показатељ проблема, па извлачењем селектора из опсега и позивањем уз коментар можемо лакше препознати те проблеме у нашем коду.

Погоршало се када се амперсанд на овај начин користио у мешавини. Ево одломка Лесс микина који смо имали за дугмад:

Опет, @ ат-роот директива није нам могла помоћи у Либсасс-у. У овом случају, морали смо да сагледамо основни узрок замене специфичности и решимо га. (Добра вест је да смо то поправили брисањем три превише специфична стила негде другде.)

Још једна разлика између амперсанда Лесс и Сасс заправо је била од помоћи:

Наша очекивања су била .цхецкбок-врап> .цхецкбок-видгет, .радио-врап> .радио-видгет. Међутим, Лесс обрађује амперсанд са више рекурзије и тако га компајлира:

Ни у једном тренутку нисмо - или бисмо то учинили - употребили виџет за потврду за радио дугме. Срећом, Сасс је заправо решио проблем за који нисмо знали јер нисмо гледали наш компајлирани ЦСС.

Научена лекција: Често погледајте свој компајлирани ЦСС - иначе не знате шта корисници преузимају.

Упоређивање резултата

Ажурирања да би се поправили и уклонили миксини, отклонили неслагања и отклонили неке друге битове који се нису претворили у чисте конверзије догодила су се током седам урезивања током месеца. Било је добро очистити кућу и идентификовати будуће могућности за прераду.

Ипак није важно како изгледа наш изворни код; рачуна се оно што се испоручује нашим корисницима. Сматрали смо да генеришемо АСТ да упоредимо наш компајлирани ЦСС. После неких истраживања и експериментисања, постало је јасно да нам је потребан само начин да сазнамо да ли се врло мало тога променило у компајлираном ЦСС-у. Стога би биле добре старомодне разлике - што је разлика мања, то боље. Сваки захтев за повлачењем долазио је са разликом резултата пре и после резултата компилације Лесс. Алат за програмере Ксцоде ФилеМерге било је врло згодно упоредити резултате упоредо. Ако смо видели нешто што нисмо очекивали, вратили смо се да истражимо.

Заглавили смо са ФилеМерге и диффс када смо прешли на наш стампедо за проналажење и замену регуларног израза и заправо претворили датотеке у СЦСС. Међутим, резултати састављени од два различита претпроцесора учинили су наше разлике бескорисним због разлика у табулаторима и постављању заграда. Додали смо додатни корак за нормализацију формата ЦСС-а пре и после једноставна скрипта чвора . Умањује ЦСС, а затим га улепшава. Не може бити једноставније.

Нормализација форматирања је у великој мери помогла, али прочишћавање разлике ипак је трајало око два солидна дана прегледа. Процес награђивања, али напоран. Сумњамо да би прилагођено АСТ решење помогло убрзању прегледа. Требало је решити све разлике.

Али разлике су биле мале. Селектори у мало другачијем редоследу, децимално заокруживање и чак незнатне разлике у резултатима функција боја. Свака разлика је пажљиво проверена пре пуштања нашег Сассед-уп ЦСС-а у производњу.

Шта је следеће

Једном спојени, радови у току једва да су застали. Мање датотека које су још у фази израде било је лако претворити захваљујући свим припремним радовима обављеним унапред. Сви су били у погону за отприлике два дана. Чак је и редизајнирани тим за Цомпосе успео да регексира свој пут до СЦСС-а за неколико сати. Планирање унапред и чишћење постојећих стилова пре повлачења прекидача учинили су све разлике.

Сада идемо даље са идентификовањем образаца, разбијањем великих ЦСС датотека у модуле, ревизијом ЦСС-а у производњи за неискоришћене бираче и трошењем више времена на алате за упоређивање АСТ-ова или неког другог рашчлањеног представљања нашег ЦСС-а. Јесам ли споменуо да имамо скоро 19 000 ЦСС селектора? Ми смо на томе - али то је сасвим други чланак.

Подели Са Пријатељима: