Less.js ile ilk adımlar

Web uygulaması geliştirme bizi birçok yoldan götürür, ancak tüm bu yolların ortak bir noktası vardır: kod HTML ve kod CSS, bu da bize uygulamalarımızın istediğimiz veya hayal ettiğimiz gibi görünmesini sağlamak için birçok olanak sağlıyor.
Şimdi olan şu ki, her insanın kendi gelişim yolu olduğu için, çoğu zaman ortaya çıkan kodlar çok kapsamlı veya biraz dağınık, bu da bakım ve performansın biraz etkilenmesine neden oluyor. Bu, kütüphanelerin ve ön işlemcilerin biraz daha temiz ve daha verimli bir kod yazmamıza yardımcı olduğu ve böylece ekip çalışmasına da yardımcı olduğu yerdir, çünkü bu kitaplıkların çoğu daha iyi kod yazmamızı sağlar.
Daha az.jsİsim Daha az.js kelimelerin birleşiminden türetilmiştir. CSS Yalın, gibi bir şey CSS bu ön işlemcinin ne yapacağı hakkında bize zaten bir fikir veren daha ince veya azaltılmış, bu da daha az CSS kodu yazmamıza yardımcı olmaktan başka bir şey değil, böylece uygulamalarımızın ve web sayfalarımızın okunabilirliğini ve performansını iyileştiriyor. dayanmaktadır JavaScript bu yüzden bu uygulama üretim için önerilmese de istemci tarafında veya sunucu tarafında da kullanabiliriz. npm ve Node.js, böylece bazılarının eklentisi olabilir JavaScript çerçevesi şu anda sürüyoruz.
benimsemek için ana fikir Daha az.js geliştirme ortamımızda, ilkenin karşılanmasına yardımcı olmaktır. KURUyani kendimizi tekrar etmemek ve bunu başarmak Daha az.js yazacağımızdan çok daha fazla yeniden kullanılabilir kod yazmamızı mümkün kılan işlevleri, sınıfları ve değişkenleri içerir. CSS direkt olarak.
1- Ele alacağımız örnekleri yorumlayabilecek modern bir tarayıcıya ihtiyacımız var, olabilir Google Chrome veya Firefox Geliştirici Sürümü.
2- Tarzda bir metin düzenleyicimiz olmalı Sublime Text tarafından veya NotePad ++ örneklerimizi daha rahat yazabilmek için.
3- Son olarak, gerekli kaynakları indirmek için komut konsolu ve bir İnternet bağlantısı aracılığıyla öğeleri yüklemek için izinlere ihtiyacımız var.
Kurulumkurulumu Daha az.js Birincisi doğrudan istemci düzeyinde, ikincisi ise aşağıdaki gibi bir sunucu ortamında olmak üzere iki şekilde yapılabilir. Node.jsAşağıda bu yolların her birini görelim.
Bu yükleme biçimi, kitaplığı içeren dosyayı çağırmak kadar kolaydır. Daha az.js, ve basitçe zaten ortamımıza dahil edilmiştir. Kütüphaneyi indirmek için lesscss.org adresine gitmemiz ve en son kararlı sürümü indirmemiz yeterli.

BÜYÜT

İndirilen dosyaya sahip olduğumuzda, ortamımızı geliştirmeye hazır olup olmadığımızı bilmemize yardımcı olacak küçük bir örnek yapmaya devam edebiliriz. Daha az.js, bu yüzden aşağıdaki adımları gerçekleştirmeliyiz:
1- Bir klasör oluşturacağız ve içinde adında bir dosya oluşturacağız. index.html, sonra dosyayı bulacağız daha az.min.js klasörün içinde uzak versiyonunun Daha az.js indirdiğimize ek olarak adında bir dosya oluşturacağız. stiller.less, tanımladığımız şeyin yapısı aşağıda gördüğümüz gibi görünmelidir:

2- Ardından aşağıdaki kodu dosyamızın içine yazacağız. index.html böylece uygulayabileceğimiz bir şeyimiz olsun CSS ve böylece stilleri kontrol edin:

 Less.js ile ilk adımlar Üst bilgimiz İçerik Alt bilgimiz

Burada her şeyden önce bir yapı görüyoruz. HTML temel, içinde nerede vücut bir etiket yerleştirdik başlık, bir etiket Bölüm ve sonunda bir etiket altbilgi, bu bize stilleri uygulayabileceğimiz tamamen farklı üç öğe verir. CSS.
3- Şimdi etiketin içinde kafa önceki koddan dosyamızı dahil edeceğiz stiller.less ve bu eklemeden sonra dosya daha az.js, bu noktada şunu vurgulamak çok önemlidir. daha az.js her zaman dosyalarımızdan sonra eklenecektir .az stillerin taşıyacağı ve dosyaların .az eklediğimiz özniteliğe sahip olmalıdır rel aşağıdaki gibi: rel = "stil sayfası / daha az" bu olmadan derleyici az o dosyayla çalışmak zorunda olduklarını bilmeyecekler. Bir önceki adımdan koda eklenecek ek kod ile head etiketimizin nasıl görüneceğini görelim:

 Less.js ile ilk adımlar 

4- Şimdi sadece bazı stiller eklememiz gerekiyor CSS dosyanın içinde stiller.less, aşağıdaki kod, oluşturduğumuz farklı etiketleri farklı renklerle ayırt etmek olacaktır:

 üst bilgi {renk: mavi;} bölüm {renk: gri;} altbilgi {renk: sarı;}

5- Bizimkileri açarsak index.html bir tarayıcı ile stilin nasıl değiştiğini göreceğiz ve bir geliştirici konsolu açarsak yazdırdığı mesajları göreceğiz daha az.js Çalıştığını bize bildirmek için aşağıdaki resimde neye benzediğini görelim:

Hatta biraz daha derinlemesine alıştırma yapabiliriz ve örneğimizin kaynak kodunu tarayıcıda açıp nasıl olduğunu görebiliriz. daha az.js bir kod oluşturdu CSS dahil etmediğimiz belgemizde:

sunucu tarafındaİstemci tarafında kurulum, geliştirme yaparken çok kullanışlıdır, çünkü bize bir tür işlem yapmamıza izin verir. hata ayıklama gerçek zamanlı olarak, dolayısıyla o andaki değişiklikleri gözlemliyoruz, ancak bir üretim ortamı için hiç tavsiye edilmiyor, ilk etapta zaman kaybediyoruz. Daha az.js stil sayfalarını oluşturur ve ikinci olarak dosyalarımızı yüklediğimiz için .az başkaları tarafından kopyalanabilir. Bu yüzden şimdi nasıl çalışacağımızı göreceğiz Daha az.js derleyicinizi kurarken bunun için paket yöneticisini kullanacağız. npm.
bir örneğine sahip olmalıyız fonksiyonel npm, bu yüzden en son sürümünü yüklemenizi öneririz. Node.js işletim sistemimiz için.
Ayrıca paketleri kurabilmek için yeterli izne ihtiyacımız var. npmve komut konsolu düzeyinde komutları yürütmek için bu özellikle ortamlarda çok önemlidir. Linux Y Mac, böylece içinde pencereler izinlerin bu düzeyde işlenmesi daha kolaydır.
1- Bir komut konsolundan aşağıdaki komutu şu komutla yürütmeliyiz: npm:

 npm install -g daha az

2- Bir önceki adım derleyiciyi kurmamızı sağladı Daha az.js, isminde daha az, yaptığı şey, kodumuzu dönüştürmektir. az bir tarayıcıda kullanmak için geçerli bir CSS kodunda, bu yüzden onu test edeceğiz, bunun için adında bir dosya oluşturacağız. örnek.siz içinde aşağıdaki kod ile:

 @color: blue; .highlight () {color: @color;} p {.highlight ();}

3- Yukarıdakiler yapıldıktan sonra konsolumuza gidiyoruz ve bir dosya oluşturmak için aşağıdaki talimatı uyguluyoruz. .css derlenmiş kodumuzun duracağı yer:

 daha az örnek.less> örnek.css

Ortaya çıkan dosyamızda aşağıdaki resimde gördüğümüzü elde edeceğiz:

Sıkıştırılmış bir sonuç istiyorsak veya küçültülmüş sadece ekle -x parametresi aradıktan sonra daha az aşağıdaki gibi:

 lessc -x örnek.less> örnek.css

Bize aşağıdakileri veren nedir küçültülmüş css sonuç olarak:

Son örnekte kurulumların kullanım şekline göre basit bir etiket üzerine rengin yerleştirildiğini gördük. P birkaç şey yapıyoruz, önce bir renk değişkeni tanımlıyoruz. @ değiştirici, bu, belgemiz boyunca değişkenler içindeki renkleri veya değerleri çağırabileceğimiz anlamına gelir, böylece bir değişkenimiz olabilir @colorTitle ve bununla biliyoruz ki, başlık rengini kullanmak istediğimiz her yerde sadece o aramayı yapıyoruz.
Yeniden kullanılabilir rutinlerGördüğümüz başka bir şey de, adında bir işlev yarattığımızdı. .vurgulamak () ve içine bir nitelik yerleştiririz CSS ve değeri bizim değişkenimizdi, bu, stillerimiz içinde nasıl yeniden kullanılabilir rutinler oluşturabileceğimizin başka bir örneğidir, bu nedenle herhangi bir sınıf veya öznitelikte bir şeyi vurgulamak istediğimizde, p öğesinin içinde yaptığımız gibi o işlevi çağırmamız yeterlidir. örnek.
Böylece görüyoruz ki, Daha az.js daha azını nasıl yapacağımız hakkında daha fazla düşünmemize yardımcı olması ve böylece sonunda sıkıştırılmış, geçerli ve okunması kolay bir kod ile sonuçlanmasıdır, örnekte çok az şey için çok şey yazıldığı söylenebilirdi. CSS sonuç, ancak fikir şu ki, çok fazla CSS yapmamız gerektiğinde, daha az yazıyoruz, bu yüzden görüyoruz ki Daha az.js büyük stil sayfaları yaptığımızda ortaya çıkıyor.
Bununla bu öğreticiyi bitiriyoruz, ilk adımlarımızı atmayı öğrendik Daha az.js, bu yüzden artık mümkün olan en az miktarda kodu kullanarak harika uygulamalar veya web sayfaları oluşturabilmek için iyi araçlarımız var.