LESS CSS - Başlangıç Kılavuzu
CSS Ön İşlemcisi şimdi web geliştirmede temel bir unsur haline geldi. Düz CSS'yi, web geliştiricilerinin yapmasına izin veren Değişkenler, İşlevler veya Karıştırma ve İşlem gibi programlama özellikleriyle birlikte gönderir modüler, ölçeklenebilir ve daha yönetilebilir CSS stilleri.
Bu yazıda, etrafındaki en popüler CSS Ön İşlemcilerinden biri olan ve Bootstrap gibi birçok ön uç çerçevede yaygın olarak kullanılan LESS'i inceleyeceğiz. Biz de yürüyeceğiz LESS ile çalışmaya başlamanıza yardımcı olacak temel yardımcı programlar, araçlar ve kurulumlar.
Derleyici
Başlamak için bir derleyici kurmamız gerekecek. LESS sözdizimi, W3C belirtimine göre standart değildir. Tarayıcı, CSS'ye benzer özelliklerin devralınmasına rağmen çıkışı işleyemez ve işleyemez.
LESS kodunda bir bakış:
@ renk bazında: # 2d5e8b; .class1 arka plan rengi: @ renk tabanı; .class2 background-color: #fff; renk: @ renk tabanı;
Derleyici kodu işleyecek ve LESS sözdizimini tarayıcı uyumlu CSS formatına dönüştürecektir:
.class1 background-color: # 2d5e8b; .class1 .class2 background-color: #fff; renk: # 2d5e8b;
CSS'yi derlemek için çok sayıda araç vardır:
JavaScript'i kullanma
Az bir gelir less.js Web sitenize yerleştirmesi gerçekten kolay olan bir dosya. İle bir stil sayfası oluşturun .az uzantısını kullanarak belgenizde rel = "stil / daha az" nitelik.
JS dosyasını buradan edinebilir, Bower paket yöneticisi aracılığıyla indirebilirsiniz, bunun yerine doğrudan CDN ile bağlantı kurabilirsiniz:
Hepiniz hazırsınız ve içinde stiller oluşturabilirsiniz. .az. LESS sözdizimi, sayfa yüklenirken anında derlenir. Aklınızda bulundurun JavaScript'i kullanmak, web sitesinin performansını olumsuz etkileyeceğinden, üretim aşamasında önerilmez..
Her zaman LESS sözdizimini önceden ve sadece derlemelisiniz. düzenli CSS sun yerine. Kullanabilirsiniz terminal, Gibi bir Görev Runner Homurtu veya Yudum, veya bunu yapmak için bir grafik uygulama.
CLI'yi kullanma
LESS, yerel bir komut satırı arayüzü (CLI) sağlar, lessc, LESS sözdizimini derlemenin ötesinde birkaç görevi yerine getirir. CLI kullanarak kodları sıralayabilir, dosyaları sıkıştırabilir ve bir kaynak haritası oluşturabiliriz. Komut, komutun Windows, OS X ve Linux'ta çalışmasına izin veren Node.js tabanlıdır.
Node.js dosyasının kurulu olduğundan emin olun (burada yükleyiciyi buradan alın), ardından aşağıdaki komut satırını kullanarak LESS CLI'yi NPM (Düğüm Paket Yöneticisi) aracılığıyla yükleyin.
npm kurulum -g az
Şimdi sende lessc LESS'i CSS'ye derlemek için emrinizde:
lessc style.less style.css
Görev Çalıştırıcısını Kullanma
Görev koşucu, geliştirme görevlerini ve iş akışlarını otomatikleştiren bir araçtır. Çalıştırmak yerine lessc Kodlarımızı derlemek istediğimizde, bir görev çalıştırıcısı kurabilir ve LESS dosyalarımızdaki değişiklikleri izleyecek şekilde ayarlayabiliriz ve hemen LESS'i CSS'ye derleyebiliriz..
Bugün bu kategorideki iki popüler araç Grunt ve Gulp. Bu araçları kapsayan bir dizi görevimiz var. Bu araçları iş akışınıza nasıl dağıtacağınızı öğrenmek için postalarınızı kontrol edin..
- İş Akışınızı Otomatikleştirmek İçin Grunt Nasıl Kullanılır?
- Gulp.js ile Başlarken
- Derleme Scriptleri Muharebesi: Gulp Vs Grunt
Grafiksel Uygulamayı Kullanma
Terminal ve komut satırlarını kullanmaya alışkın olmayanlar için bunun yerine bir grafik arayüzü tercih edebilirler. Bugün tüm platformlar için LESS'i derlemek için birçok uygulama vardır - bazıları ücretsiz, bazıları ücretli
İşte tam listesi:
| Uygulama | platform | Maliyet |
| karışım | OS X / Windows | Ücretsiz |
| Koala | OS X / Windows / Linux | Ücretsiz |
| Prepros | OS X / Windows | Freemium (USD29) |
| winless | , Windows | Ücretsiz |
| CodeKit | OS X | USD32 |
Hangi derleyiciyi seçeceğiniz (JavaScript dışında) gerçekten önemli değil, açıkçası, araç çalıştığında ve iş akışınızı tamamladığı sürece, bunun için gidin..
Kod Düzenleyicisi
Herhangi bir kod düzenleyiciyi kullanabilirsiniz. SublimeText, Notepad ++, VisualStudio, TextMate ve Eclipse dahil olmak üzere hemen hemen tüm kod editörleri ve IDE'ler için kullanılabilen bir özellik olan LESS sözdizimini uygun renklerle vurgulamak için bir eklenti veya uzantı yükleyin..
Artık tüm derleyici ve kod düzenleyicisine sahibiz, CSS stillerini LESS sözdizimi ile yazmaya başlayabiliriz..
LESS Sözdizimi
Bildiğimiz gibi düzenli CSS'den farklı olarak, LESS bir programlama dili gibi çok daha fazla çalışır. Dinamik, bu nedenle bazı terminolojiler bulmayı umuyoruz Değişkenler, Operasyon ve kapsam yol boyunca.
Değişkenler
Her şeyden önce, bir göz atalım Değişkenler.
CSS ile oldukça uzun bir süredir çalışıyorsanız, büyük olasılıkla böyle bir şey yazmışsınızdır, burada tüm stil sayfasındaki bildirim bloklarında tekrarlanan değerler verilmiştir..
.class1 background-color: # 2d5e8b; .class2 background-color: #fff; renk: # 2d5e8b; .class3 border: 1px katı # 2d5e8b;
Bu uygulama aslında gayet iyi - kendimizi daha fazla elemek zorunda kalana kadar bin veya daha fazla benzer snippet stil sayfası boyunca. Bu, büyük ölçekli bir web sitesi oluştururken olabilir. İş sıkıcı olacak.
LESS gibi bir CSS işlemcisi kullanıyorsak, yukarıdaki örnek sorun olmaz - kullanabiliriz Değişkenler. Değişkenler saklamamıza izin verecek sabit daha sonra stil sayfasının tamamında tekrar kullanılabilecek değer.
@ renk bazında: # 2d5e8b; .class1 arka plan rengi: @ renk tabanı; .class2 background-color: #fff; renk: @ renk tabanı; .class3 kenarlık: 1px katı @ renk tabanı;
Yukarıdaki örnekte, rengi saklıyoruz # 2d5e8b içinde @ Renkli temel değişken. Rengi değiştirmek istediğinizde, yalnızca bu değişkendeki değeri değiştirmemiz gerekir.
Renklerin dışında, örneğin gibi değişkenlere başka değerler de koyabilirsiniz:
@ font-family: Georgia @ dot-border: dotted @transition: linear @opacity: 0.5
Katmalar
LESS'te kullanabiliriz Katmalar bildirimlerin tamamını başka bir kural kümesinde ayarlanan bir CSS kuralında yeniden kullanmak için. İşte bir örnek:
.gradyanlar background: #eaeaea; arka plan: doğrusal gradyan (üst, #eaeaea, #cccccc); arka plan: -o-doğrusal-gradyan (üst, #eaeaea, #cccccc); background: -ms-linear-gradyan (üst, #eaeaea, #cccccc); arka plan: -moz-linear-gradyan (üst, #eaeaea, #cccccc); background: -webkit-linear-gradyan (üst, #eaeaea, #cccccc);
Yukarıdaki kod parçasında, bir varsayılan ayarı önceden belirledik eğim içindeki renk .gradyanları sınıf. Degradeleri eklemek istediğimizde, sadece .gradyanları bu yoldan:
div .gradients; sınır: 1px katı # 555; sınır yarıçapı: 3px;
.Kutu içindeki tüm bildirim bloğunu miras alacak .gradyanları. Bu nedenle, yukarıdaki CSS kuralı aşağıdaki düz CSS'ye eşittir:
div background: #eaeaea; arka plan: doğrusal gradyan (üst, #eaeaea, #cccccc); arka plan: -o-doğrusal-gradyan (üst, #eaeaea, #cccccc); background: -ms-linear-gradyan (üst, #eaeaea, #cccccc); arka plan: -moz-linear-gradyan (üst, #eaeaea, #cccccc); background: -webkit-linear-gradyan (üst, #eaeaea, #cccccc); sınır: 1px katı # 555; sınır yarıçapı: 3px;
Ayrıca, web sitenizde CSS3'ü çok kullanıyorsanız, işinizi kolaylaştırmak için LESS Elements'ı kullanabilirsiniz. LESS Elements ortak koleksiyonudur CSS3 Mixins stil sayfalarında sıkça kullanabileceğimizi, border-radius, gradyanları, Düşen gölge ve bunun gibi.
LESS Elements'i kullanmak için, sadece @ithalat LESS stil sayfanızda kural kullanın, ancak önce indirmeyi ve çalışma dizininize eklemeyi unutmayın.
@import "elements.less";
Artık hepsini yeniden kullanabiliriz. sınıflar tarafından sağlanan elements.less, örneğin eklemek için 3px kenarlık yarıçapı bir div, yazabiliriz:
div .rounded (3 piksel);
Daha fazla kullanım için lütfen resmi belgelere bakın.
İç İçe Kurallar
Düz CSS'de stiller yazarken, bu tipik kod yapılarından da geçmiş olabilirsiniz..
nav yükseklik: 40 piksel; genişlik:% 100; arkaplan: # 455868; sınır-alt: 2 piksel katı # 283744; nav li genişlik: 600px; yükseklik: 40px; nav li a color: #fff; hat yüksekliği: 40px; metin gölgesi: 1 piksel 1 piksel 0 piksel # 283744;
Düz CSS'de, ilk önce her kural kümesinde ebeveyni hedefleyerek alt öğeleri seçeriz; “en iyi uygulamalar” prensip.
LESS CSS'de, kural kümelerini şu şekilde basitleştirebiliriz: alt öğelerin ebeveynlere yerleştirilmesi, aşağıdaki gibi;
nav yükseklik: 40 piksel; genişlik:% 100; arkaplan: # 455868; sınır-alt: 2 piksel katı # 283744; li genişlik: 600 piksel; yükseklik: 40px; bir renk: #fff; hat yüksekliği: 40px; metin gölgesi: 1 piksel 1 piksel 0 piksel # 283744;
Ayrıca atayabilirsiniz sözde sınıflar, sevmek : hover, ve işareti (&) sembolünü kullanarak seçiciye.
Diyelim ki eklemek istiyoruz : hover yukarıdaki bağlantı etiketine şu şekilde yazabiliriz:
bir renk: #fff; hat yüksekliği: 40px; metin gölgesi: 1 piksel 1 piksel 0 piksel # 283744; &: gezdir background-color: # 000; renk: #fff;
Operasyon
Ayrıca LESS’te de toplama, çıkarma, çarpma ve bölme stil sayfasındaki sayıları, renkleri ve değişkenleri.
Diyelim ki B elementinin A elementinden iki kat daha yüksek olmasını istiyoruz. Bu durumda, şu şekilde yazabiliriz:
@height: 100px .element-A height: @height; .element-B yükseklik: @ yükseklik * 2;
Yukarıda gördüğünüz gibi, önce değeri @yükseklik değişkeni sonra A elemanına bir değer atayın.
B elementinde, yüksekliği kendimiz hesaplamak yerine, yüksekliği 2 ile çarpabiliriz yıldız operatörünü kullanarak (*). Şimdi, ne zaman değerini değiştirmek için @yükseklik değişken, eleman B her zaman yüksekliğin iki katı olacak.
Daha önceki çalışma kılavuzumuzda daha gelişmiş işlem örneklerine göz atın: Kaygan Menü Gezinme Çubuğu Tasarlama.
kapsam
LESS uygulanır kapsam Değişkenlerin önce yerel kapsamdan miras alınacağı ve yerel olarak bulunmadığı durumlarda, daha geniş bir kapsamda arama yapacaktır..
başlık @color: black; arkaplan rengi: @color; nav @color: mavi; arkaplan rengi: @color; bir color: @color;
Yukarıdaki örnekte başlık bir siyah arka plan rengi, ancak navarka plan rengi olacak mavi yerel kapsamda @renk değişkenine sahipken, bir Ayrıca yakın ebeveyne miras kalan mavi olacaktır., nav.
Son düşünce
Sonuç olarak, bu yazının size LESS kullanarak nasıl daha iyi bir şekilde CSS yazabileceğimize dair temel bir anlayış sağlayabileceğini umuyoruz. Belki ilk başta biraz garip hissedersiniz, ancak daha sık denedikçe, kesinlikle çok daha kolay olacak.
LESS becerilerinizi bir üst seviyeye taşımaya yardımcı olabilecek diğer ipuçlarına ve uygulamalara göz atmanızı tavsiye ettiğim birkaç ders:.
- LESS CSS Eğitimi: Kaygan bir Menü Gezinme Çubuğu Tasarlama
- LESS Renk İşlevlerini Anlama
- Bilmeniz Gereken 3 Yeni LESS CSS Özellikleri
