Azdan Sass'a Geçiş Deneyimimiz

Vanilya CSS'den CSS ön işlemcisine geçiş hakkında çok şey yazılmıştır ve iyi bir nedenden ötürü - ön işlemciler, tarayıcıda tek başına alamayacağımız gücü ve kontrolü ekler. Makalelerden bir ön işlemcinin erdemlerini yüceltmek Etsy’nin ayrıntılı 'gibi daha teknik okumalara Ölçekte SCSS'ye Geçiş , ”Hepsini yutmuş gibi hissediyorum.

Şurada: HASHTAGS bir önişlemciden diğerine geçmek gibi neredeyse hakkında yazılmamış bir şey yaptık. Erken dönemde, Sprout benimsendi Az ; CSS benzeri sözdizimi olan SCSS'ye geçme kararını geçen yıl verdik. Sass . Geçişin sorunsuz olmasını sağlamak için zaman ayırdık ve deneyim, Less ve Sass arasındaki bazı derin farklılıkları vurguladı.

Neden?

Öğrendiklerimize gelmeden önce, ilk sorunuz - meşru bir soru - 'Neden zahmet edelim?' Değişkenlerden ve karışımlardan, @importlardan ve renk işlevlerinden zaten faydalandık. Elbette, Sass'ın daha az eksik olduğu bir dizi özelliği vardır. haritalar ve fonksiyonlar ama onlar olmadan bu kadar ileri gittik.

Geçiş yapmanın iki ana nedeni öne çıkıyor:

Topluluk: Github'da lib extension: scss'i arayın, ardından lib extension: less'u arayın. Bu yazı itibariyle sonuçlar net: 120.234 SCSS dosyası, 29.449 Daha az dosya. Geçiş, daha geniş bir dizi iyi fikre ve yüzmek için daha büyük bir açık kaynak havuzuna erişim sağlar. Less'in uygulanabilir kalmasının nedenlerinden biri olan popüler Bootstrap kütüphanesi bile, SCSS'ye geçiyor .
Hız: Libsass kayalar. Stillerimizin yapım süresi% 500'ün üzerinde arttı. Libsass henüz Sass teknik özelliklerinin en son sürümünü yakalamamış olsa da, hiçbir şey kaçırdığımızı düşünmüyoruz.

Nasıl?

Derlenmiş CSS'miz yaklaşık 19.000 seçiciye sahiptir. Geçişten sonra, derlenen CSS'nin neredeyse aynı olması gerekiyordu; bu geçişin müşterilerimiz tarafından görünmez olmasını sağlamalıydık. Peki ya şu anda devam eden özellikler? bizim son oluşturma güncellemesi 3.837 stil çizgisini değiştirdi - bu takım nasıl güvenli bir şekilde ortasına geçiş yapabilir?

Üç seçeneği değerlendirdik:

Önce her şeyi CSS'de derleyin. Kullanıcılarımızın aynı stilleri aldığından% 100 doğrulukla emin olmanın ve anahtarı bir gün içinde çekmenin tek yolu bu. Temiz bir mola fikri her zaman baştan çıkarıcıdır, ancak yeni kod her zaman daha iyi kod değildir . Gibi araçlarla bile sass-convert ve css2compass , yeniden inşa etmek için harcayacağımız zaman diğer seçeneklerden büyük ölçüde ağır basacaktır.
SCSS'de yalnızca yeni stiller yazın. Kumda bir çizgi çizmeyi düşündük- Daha azı eski ve bozuk; Sass yeni güzelliktir . Nihayetinde bu fikri reddettik. Anında geçiş yapmakla çok şey kazanılacaktı ve hiç kimse iki mixin ve değişken seti arasında eşitliği korumak istemiyordu.
Tüm Daha az dosyalarımızı SCSS'ye dönüştürün ve kırılmaları düzeltin. Ya geçmişi atmak ya da sürdürmek için başka bir inşa görevi eklemekle karşı karşıya kaldık, her şeyi dönüştürmeye başladık.

Temizlik Evi

SCSS, Less'den pek farklı değil, değil mi? ' Az'dan Sass'a dönüştürme ”, .Awesome-mixin () ile @mixin awesome-mixin () gibi en belirgin sözdizimi farklılıklarını değiştirmek için bir dizi normal ifade aramasını paylaşır. Bu normal ifade aramaları, less2sass , tüm dosyalarımızı inceledik.

O kadar kolay olsaydı, hakkında blog yazacak pek bir şey kalmazdı. Less2sass betiğine kalan birkaç çekme isteği, bazı gözetimlerini vurgular. dize enterpolasyon farklılıkları . Daha zorlayıcı olan, dönüşümden sonra karşılaştığımız ve basit bir normal ifadenin çözebileceğinden daha büyük farklılıkları vurgulayan derleme hatalarıydı. Açıkçası, bazı kötü CSS'ler de bulduk.

Bu yapı hatalarını aldık ve düzeltmemiz gerekenlerin bir listesini yaptık ve stilleri dönüştürmeden önce çoğunu düzeltebileceğimizi biliyorduk. Daha az dosyalarımızı dönüştürmeden önce temizlemeye karar verdik.

Fixin ’Mixins

Less ve Sass'ın koşulluları nasıl ele aldığı arasındaki farkla başladık. İşte sahip olduğumuz basit bir gradyan karışımı:

Sass, basit bir @ if… @ else yapısı sunar, oysa bizim mixinimiz Less'in mixin koruması . Gradyan karışımımız söz konusu olduğunda, bunu satıcı tarafından önekli taslak sözdiziminden W3C sözdizimine geçmek için kullanıyorduk. Bu mixini yeniden yazmamız gerektiğini biliyorduk.

Sonra durduk ve tüm mixinlerimize uzun bir göz attık. Çoğu, satıcı öneklerini ekledi ve yukarıdaki gradyan karışımı gibi tarayıcı farklılıklarını çözdü. Giriş Otomatik düzeltici , CSS'yi ayrıştıran ve desteklenen tarayıcıların bir listesine göre satıcı öneklerini uygulayan bir araç. Yapımıza Autoprefixer ekleyerek dokuz mixini ortadan kaldırdık. Bir bonus olarak, Autoprefixer gereksiz satıcı öneklerini kaldırır ve bu da CSS'mizdeki bazı tozlu köşeleri belirlememize ve daha küçük derlenmiş dosyalar oluşturmamıza yardımcı oldu.

Buradaki deneyimimizden güzel bir ders: Silebileceğiniz şeyleri dönüştürmek veya yeniden düzenlemek için zaman kaybetmeyin.

Kayda değer başka bir mixin farkı: Less, parametreleri noktalı virgülle ayırmayı önerir . Sadece birkaçı bu şekilde yazılmıştı, ancak mixin tanımlarında ve nerede uygulandıklarında hepsinin değiştirilmesi gerekiyordu. Neyse ki Less, hem noktalı virgülleri hem de virgülleri destekler, bu nedenle bu değişikliği dönüştürme adımından önce yapabiliriz.

333 ne demek

Ampersan Kötüye Kullanım

Karışımları ele aldıktan sonra, dikkatimizi başka bir derleme hatası kaynağına çevirdik: ve işareti . Hem Sass hem de Less'teki en güçlü operatörlerden biridir ve çok benzer şekilde çalışırlar. Yapmadıkları zamanlar hariç. Ve sonra çok farklı çalışıyorlar.

Örneğin, 19.000 seçiciyle, genellikle aşağıdaki gibi hızlı bir şekilde çözülen özgüllük problemleriyle karşılaştığımızı hayal edebilirsiniz:

Daha azı şüphelendiği gibi h1.modal-başlığı üretir, ancak Sass boğulur. Bunu şu şekilde düzeltmeyi denedik:

Ruby Sass ile harika çalışıyor, ancak bu yazı itibariyle Libsass henüz bu kullanımı desteklemiyor . Bu durumda Ruby Sass'a geçmeyi düşünmedik bile. Bunun yerine h1.modal-header'i .modal kapsamı dışında yazdık. Bunun bir sorunun göstergesi olduğunu biliyoruz, bu nedenle seçiciyi kapsam dışına çıkarıp bir yorumla çağırarak, kodumuzdaki bu sorunları daha kolay belirleyebiliriz.

Bir ve işareti bu şekilde bir karışımda kullanıldığında daha da kötüleşti. Düğmeler için sahip olduğumuz Daha Az karışımından bir alıntı:

Yine, @ at-root yönergesi Libsass'ta bize yardımcı olamadı. Bu durumda, özgüllüğün geçersiz kılınmasının temel nedenine bakmalı ve onu çözmeliydik. (İyi haber şu ki, başka yerlerde aşırı spesifik üç stili silerek sorunu çözdük.)

Küçük ve Sass ve işaretleri arasındaki bir başka fark aslında yardımcı oldu:

Beklentimiz .checkbox-wrap> .checkbox-widget, .radio-wrap> .radio-widget idi. Bununla birlikte, Less, ve işaretini daha fazla özyinelemeyle işler ve şu şekilde derlenir:

Hiçbir noktada bir radyo düğmesi için bir onay kutusu widget'ı kullanmadık ya da kullanacaktık. Neyse ki, Sass aslında bilmediğimiz bir sorunu çözdü çünkü derlenmiş CSS'mize bakmıyorduk.

Alınan ders: Derlenmiş CSS'nize sık sık bakın; aksi takdirde, kullanıcılarınızın ne indirdiğini bilemezsiniz.

Sonuçları Karşılaştırmak

Karışımları düzeltmek ve kaldırmak, ve işareti farklılıklarını çözmek ve temiz bir şekilde dönüştürülemeyecek bazı diğer bitleri ele almak için yapılan güncellemeler, bir ay boyunca yedi işlemde gerçekleşti. Evi temizlemek ve gelecekteki yeniden düzenleme fırsatlarını belirlemek iyi hissettirdi.

Yine de kaynak kodumuzun neye benzediğinin önemi yoktur; önemli olan kullanıcılarımıza teslim edilen şeydir. Üretmeyi düşündük AST'ler derlenmiş CSS'mizi karşılaştırmak için. Biraz araştırma ve deney yaptıktan sonra, ihtiyacımız olan tek şeyin derlenen CSS'de çok az değişiklik olup olmadığını öğrenmenin bir yolu olduğu ortaya çıktı. Bu nedenle, eski moda iyi farklar yeterli olacaktır - fark ne kadar küçükse o kadar iyidir. Her bir çekme isteği, Less derlemesinin öncesi ve sonrası sonuçlarının bir farkıyla geldi. Xcode geliştirici aracı FileMerge sonuçları yan yana karşılaştırmak çok kullanışlıdır. Beklemediğimiz bir şey görürsek, araştırmak için geri döndük.

Normal ifade bul ve değiştir damgasına geçip dosyaları SCSS'ye dönüştürdüğümüzde FileMerge ve farklar ile takılıp kaldık. Ancak, iki farklı önişlemci tarafından derlenen sonuçlar, sekme ve köşeli ayraç yerleştirmedeki farklılıklar nedeniyle farklarımızı işe yaramaz hale getirdi. CSS öncesi ve sonrası formatını normalleştirmek için fazladan bir adım ekledik. basit bir düğüm betiği . CSS'yi küçültür, sonra güzelleştirir. Daha basit olamazdı.

Biçimlendirmenin normalleştirilmesi büyük ölçüde yardımcı oldu, ancak farklılıkları gözden geçirmek yine de yaklaşık iki gün süren bir inceleme aldı. Ödüllendirici ama zorlu bir süreç. Özel bir AST çözümünün incelemeyi hızlandırmaya yardımcı olacağından şüpheliyiz. Tüm farklılıkların ele alınması gerekiyordu.

Ancak farklar küçüktü. Biraz farklı bir sırada seçiciler, ondalık yuvarlama ve hatta renk işlevlerinin sonuçlarında küçük farklılıklar. Sassed-up CSS'mizi üretime sokmadan önce her fark dikkatlice kontrol edildi.

Sıradaki ne

Bir kez birleştirildiğinde, devam eden çalışma neredeyse hiç durdu. Önceden yapılan tüm hazırlık çalışmaları sayesinde, halen geliştirilmekte olan daha az dosyanın dönüştürülmesi kolaydı. Yaklaşık iki gün içinde herkes ayağa kalktı ve koştu. Yeniden tasarlanan Compose ekibi bile SCSS'ye giden yolunu birkaç saat içinde yeniden yazabildi. Anahtarı çekmeden önce önceden planlama yapmak ve mevcut stilleri temizlemek büyük fark yarattı.

Şimdi kalıpları belirleme, büyük CSS dosyalarını modüllere ayırma, kullanılmayan seçiciler için üretimde CSS'yi denetleme ve AST'leri veya CSS'mizin başka bir çözümlenmiş temsilini karşılaştırmak için araçlara daha fazla zaman ayırmaya devam ediyoruz. Yaklaşık 19.000 CSS seçicimiz olduğunu söylemiş miydim? Çalışıyoruz, ancak bu tamamen başka bir makale.

Arkadaşlarınla Paylaş: