CSS Ön İşlemcileri Sass ve LESS Karşılaştırıldı

Birkaç isim vermek için CSS Ön İşlemcisi, LESS, Sass, Stylus ve Swith CSS var.. CSS Ön İşlemcisi, Daha önce de söylediğimiz gibi, öncelikle CSS'yi daha dinamik, organize ve üretken hale getirme amaçlıdır. Fakat, soru, hangisinin en iyi işi yaptığını?

Tabii ki, hepsine bir göz atmayacağız, bunun yerine sadece popüler olanlardan ikisini karşılaştıracağız: Sass ve az. Karar vermek için ikisini yedi faktörde karşılaştıracağız: daha iyisini yapan bir puan alır; beraberlik durumunda, her ikisine de bir puan verilecek.

Hadi başlayalım.

Kurulum

Çok temel adımla başlayalım, Kurulum. Hem Sass hem de LESS farklı platformlar üzerine kuruludur, Sass Ruby'de çalışmaktadır, LESS ise bir JavaScript kütüphanesidir. oldu Aslında Ruby'de de yapıldı Başta).

Sass: Sass'ın çalışması için Ruby'ye ihtiyacı var, Mac'te bu önceden yüklenmiş, ancak Windows'ta muhtemelen Sass ile oynamaya başlamadan önce onu yüklemeniz gerekir. Ayrıca, Sass'ın Terminal veya Komut İstemi üzerinden kurulması gerekir. Kullanabileceğiniz birkaç GUI uygulaması var, ancak ücretsiz değiller..

AZ: LESS, JavaScript üzerine kuruludur, dolayısıyla LESS'i kullanmak, JavaScript kitaplığını HTML belgenize bağlamak kadar kolaydır. Ayrıca LESS'in CSS'ye derlenmesinde yardımcı olacak birkaç GUI uygulaması vardır ve bunların çoğu ücretsizdir ve çok iyi performans gösterirler (örneğin WinLess ve LESS.app).

Sonuç: LESS açıkça liderlik yapıyor.

Uzantıları

Hem Sass hem de LESS, daha hızlı ve daha kolay web geliştirme için uzantılara sahiptir.

şımarıklık: Son yazımızda, güncel ve popüler Sass tabanlı yayım olan Compass'ı tartıştık. Compass, CSS3 sözdizimini daha kısa sürede yazmak için çok sayıda Mixins'e sahiptir..

Ancak Compass, sadece CSS3 Mixins'in ötesinde, Helpers, Layout, Tipografi, Grid Layout ve hatta Sprite Images gibi diğer çok faydalı özellikleri de ekledi. Ayrıca .... sahip config.rb CSS çıkışını ve diğer bazı tercihleri kontrol edebileceğimiz bir dosya. Kısacası, Compass, Sass ile web geliştirme yapmak için hepsi bir arada bir pakettir..

AZ: LESS ayrıca birkaç uzantıya sahiptir, ancak tek bir yerde ihtiyacımız olan her şeye sahip olan Pusula'nın aksine, ayrılırlar ve her biri farklı geliştiriciler tarafından oluşturulur. Bu, deneyimli kullanıcılar için sorun olmayacak ancak LESS ile yeni başlayanlar için iş akışlarına uygun doğru uzantıları seçmek için biraz zaman ayırmaları gerekiyor.

Projenize eklemeniz gerekebilecek LESS uzantıları:

CSS3 Mixins: LESS Elemanları, Preboot, LESS Karışımları.
Kafes: 960.gs, Çerçevesiz, Semantic.gs
düzen: Daha az
Çeşitli: Twitter Önyükleme

Sonuç: Sass ve Pusula'nın harika bir ikili olduğu ve Sprite görüntü özelliğinin gerçekten tekme olduğu konusunda hemfikir olduğumuzu düşünüyorum, bu yüzden burada Sass için bir nokta.

duujjil

Her CSS Ön İşlemcisinin kendi dili vardır ve çoğunlukla yaygındır. Örneğin, hem Sass hem de LESS'in Değişkenleri vardır, ancak Sass değişkenlerini a ile tanımlayanların dışında, önemli bir fark yoktur. $ LESS bunu yaparken @ işaret. Hala aynı şeyi yapıyorlar: sabit bir değer sakla.

Aşağıda, en çok kullanılan dillerden bazılarını hem Sass hem de LESS'te (deneyimlerime dayanarak) inceleyeceğiz..

yuvalama

Yuvalama kuralı, seçicileri art arda yazmaktan kaçınmak için iyi bir uygulamadır ve hem Sass hem de LESS, yuvalama kurallarında aynı moda sahiptir;

Sass / Scss ve DAHA AZ

 nav marj: 50 piksel otomatik 0; genişlik: 788px; yükseklik: 45px; ul dolgu maddesi: 0; marj: 0;

Ancak Sass / Scss, bireysel özellikleri de içmemize izin vererek bu yöntemi bir adım daha ileri götürür, işte bir örnek:

 nav marj: 50 piksel otomatik 0; genişlik: 788px; yükseklik: 45px; ul dolgu maddesi: 0; marj: 0;  border: style: solid; solda: genişlik: 4 piksel; renk: # 333333;  sağ: genişlik: 2 piksel; renk: # 000000;

Bu kod aşağıdaki çıktıyı üretecektir.

 nav marj: 50 piksel otomatik 0; genişlik: 788px; yükseklik: 45px; sınır tarzı: katı; sınır-sol genişlik: 4 piksel; sınır-sol-renk: # 333333; sınır-sağ genişlik: 2 piksel; sınır-sağ-renk: # 000000;  nav ul doldurma: 0; marj: 0;

Sonuç: Bireysel özellikleri yuvalamak güzel bir ektir ve dikkate alınır en iyi pratik, özellikle DRY (Kendinizi Tekrar Etmeyin) ilkesini izlersek. Bu yüzden, bence hangisinin bu durumda daha iyi olduğu açık..

Karışımlar ve Seçici Kalıtım

Sass ve LESS'teki karışımlar biraz farklı tanımlanmıştır. Sass’ta biz@mixin LESS'teki yönergeyi sınıf seçiciyle tanımlarız. İşte bir örnek:

Sass / SCSS

 @mixin kenarlık yarıçapı ($ değerler) kenarlık yarıçapı: $ değerler;  nav marj: 50 piksel otomatik 0; genişlik: 788px; yükseklik: 45px; @ sınır yarıçapı (10 piksel);

 .border (@radius) border-radius: @radius;  nav marj: 50 piksel otomatik 0; genişlik: 788px; yükseklik: 45px; .border (10px);

Karışımlar, Sass ve LESS’te kullanılan Dahil etmek Bir kural kümesinden diğer kural kümesine özellikler. Sass'ta bu yöntem daha da ileri götürülür. Seçici Miras. Konsept aynıdır, ancak bütün özellikleri kopyalamak yerine, Sass, aynı özellikleri ve değerleri kullanan seçicileri genişletecek veya gruplandıracaktır. @extend direktif.

Aşağıdaki örneğe bir göz atın:

 .circle border: 1px katı #ccc; sınır yarıçapı: 50 piksel; taşma: gizli;  .avatar @extend .circle;

Bu kod şöyle olacaktır;

 .daire, .avatar sınır: 1px katı #ccc; sınır yarıçapı: 50 piksel; taşma: gizli;

Sonuç: Sass, farklı Mixins ve Selectors Mirası ile bir adım önde.

Operasyonlar

Hem Sass hem de LESS temel matematik işlemlerini yapabilir, ancak bazen farklı sonuçlar verir. Bu rasgele hesaplamayı nasıl yaptıklarını görün:

Sass / SCSS

 $ marj: 10 piksel; div marj: $ marj -% 10; / * Sözdizimi hatası: Uyumsuz birimler: '%' ve 'px' * /

 @ marj: 10 piksel; div marj: @ marj -% 10; / * = 0px * /

Sonuç: Sass, bu durumda, daha doğru bir şekilde yapıyor; % ve px eşdeğer olmadığından bir hata döndürmelidir. Yine de, aslında bunun gibi bir şey olabileceğini umuyorum. 10 piksel -% 10 = 9 piksel.

Hata Bildirimleri

Hata bildirimi, neyi yanlış yaptığımızı görmek önemlidir. Kaosun bir yerinde binlerce kod satırı ve küçük bir hata parçası olduğunu hayal edin. Temiz, açık, belirgin hata bildirimi sorunu çabucak çözmenin en iyi yolu olacak.

şımarıklık: Bu örnekte, derleyiciyi çalıştırmak için sadece Komut İstemi kullanıyorum. Sass, kodda geçersizlik olduğunda bir hata bildirimi üretecektir. Bu durumda, 6. satırda bir noktalı virgül kaldıracağız ve bu bir hataya dönüşmeli. Aşağıdaki ekran görüntüsüne bir göz atın.

Bu bildirimi ilk gördüğümde anlayamadım. Ayrıca, Sass hatanın nerede olduğu ile biraz kapalı görünüyor. Hatanın açık olduğunu söyledi satır 7, 6 yerine.

AZ: Aynı hata senaryosunda, LESS bildirimi daha iyi sunulmuştur ve daha doğru olduğu da anlaşılmaktadır. Bu ekran görüntüsüne bir göz atın:

Sonuç: LESS bu konuda daha iyi bir deneyim sunar ve elleri kazanır.

belgeleme

Belgeleme her ürün için çok önemlidir; hatta deneyimli geliştiriciler bile olmadan şeyler yapmak zor olurdu belgeleme.

şımarıklık: Resmi sitedeki belgelere bakacak olursak, şahsen bir kütüphanenin ortasında olduğumu hissediyorum, belgeler çok kapsamlı. Yine de, eğer sizin için önemliyse, görünüm ve his okuma için motive edici değildir, ayrıca arka plan düz beyazdır.

Sunum, W3 dokümantasyonu veya WikiPedia gibi. İnternette doküman göstermenin standart olup olmadığını bilmiyorum, ama tek yol bu değil.

AZ: Öte yandan, LESS belgeleri çok fazla metin açıklaması olmadan daha açık ve doğrudan örneklere dalıyor. Aynı zamanda iyi bir tipografi ve daha iyi bir renk düzeni vardır. Sanırım LESS'in ilk başta dikkatimi çekmesinin nedeni olduğunu ve belgelerin düzeni ve sunumu nedeniyle daha hızlı öğrenebileceğimi düşünüyorum..

Sonuç: SESS'in daha kapsamlı bir dokümantasyonu olmasına rağmen, LESS dokümantasyon sunumu daha iyi, bu yüzden buna kravat diyebiliriz..

Son düşünce

Ben açık bir sonuç olduğunu düşünüyorum Sass iyidir toplam puanı ile 5'e karşı 3 daha ucuza. Bununla birlikte, LESS'in kötü olduğu anlamına gelmez; sadece daha iyi olmaları gerekir. Sonunda, yine de, kullanıcının istediği önişleyiciyi seçme kararına kalmış durumda. Sass veya LESS, rahat ve daha üretken oldukları sürece, o zaman bu listede yer alıyor.

Son olarak, bu konuyla ilgili aklınızda bir şey varsa, aşağıdaki yorum kutusunda paylaşmaktan çekinmeyin.