LESS İpuçları ve Araçları ile Etkin Çalışma

Önceki dersimizde, kodu derlemek için ChrunchApp gibi uygulamaları kullanarak LESS'in pratik şekilde nasıl kullanılacağını öğrendik. Bu sefer LESS sözdizimini derlerken performansımızı ve verimliliğimizi artırabilecek bazı pratik ipuçlarını gözden geçireceğiz. Mevcut editörümüz için sözdizimi vurgulamasını sağlayarak, otomatik derleyici araçlarını kullanarak ve önceden ayarlanmış Mixins'i kullanarak masaüstü / çalışma ortamımızı kuracağız, sonra hepsini senkronize edeceğiz..

Eğer hazırsan, başlayalım..

Yasal Uyarı: Aşağıda açıklanan ipuçları bir web tasarımcısı olarak günden güne deneyimlerden türetilmiştir. Bu yüzden, daha ileriye gitmeden önce, ipuçlarının bazı tasarımcılara ve diğerlerine uygun olamayacağını belirtmek isterim; Tıpkı Web’de bulduğun diğer herhangi bir ipucu gibi. Yine de, umarım aşağıdaki ipuçlarından yararlı bir şeyler elde edersiniz..

1. Kod Vurgulayıcı

Daha önce de belirttiğimiz gibi, sizi ChrunchApp ile tanıştırdık. Ancak, bu uygulama her web tasarımcısının tercihi olmayabilir; Çünkü her tasarımcının kendi seçtiği kod editörü de dahil olmak üzere kendi çalışma ortamı vardır..

Başka bir kod düzenleyici kurmaktansa, gerçekte halen kullandıklarınızı kullanabilir ve sözdizimini vurgulayarak etkinleştirebilirsiniz. Bu yüzden, bu yazıda, 2 ünlü metin editörüne vurgu yaparak LESS kodu eklemek için bazı ipuçlarını paylaşacağım: Genel Metin 2 ve Not Defteri++.

Genel Metin 2

Bu editör şu anda kodları yazmama yardımcı olacak tercihim. Bu uygulama Windows, Linux ve OSX için kullanılabilir, bu yüzden işletim sisteminiz ne olursa olsun, yine de bu ipucunu takip edebileceksiniz.

Şimdi, resmi web sitesinden indirip bu editörü deneyelim. Ardından, LESS rengini vurgulamak için aşağıdaki talimatları okuyun.

Not: Lütfen ücretsiz sürümü yalnızca değerlendirme amaçlı olduğundan, indirmeden önce lisansı okuduğunuzdan emin olun..

Paket Konsolunu Yükleyin

İlk önce Sublime Text 2'nizi açın ve Konsolu bu menüden görüntüleyin Görünüm> Konsolu Göster

Ardından, aşağıdaki komut satırını kopyalayıp Konsol'a yapıştırın ve ardından paket kontrolünü wBond.net adresinden yüklemek için Enter tuşuna basın:

urllib2 alma, os; pf = "Paket Control.sublime-package"; IPP = sublime.installed_packages_path (); os.makedirs (ipp) değilse os.path.exists (ipp) başkası Yok; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); Açık (os.path.join (IPP, pf) 'WB) gelirse yaz (urllib2.urlopen (' http://sublime.wbond.net/'+pf.replace (" '% 20')). read ()); print 'Lütfen kurulumu tamamlamak için Sublime Text'i yeniden başlatın'

Bu Paket Konsolu vurgu paketini yüklememize yardımcı olacak.

LESS Vurgulama Paketini Takma

Sublime Text 2'yi yeniden başlatın ve Komut Paletini bu menüden gösterin Araçlar> Komut Paleti. Paket listesi yüklenene kadar bekleyin. Sonra yazın Kurulum paketi paket depolarını aramak ve yüklemek için.

Ardından depo listesinden LESS paketini arayın ve Enter tuşuna basın..

Sublime Text 2'nin paketi indirmesi ve yüklemesi için durum çubuğunda aşağıdaki bildirim görünene kadar bekleyin..

Menüye git Görünüm> Sözdizimi, listede LESS'i görmelisin. Yüce Metin 2'nin desteklediği anlamına gelir. .az ve LESS sözdiziminiz şimdi de vurgulayarak uygun renklere sahip olmalıdır..

Not Defteri++

Notepad ++, Ücretsiz, Açık Kaynak kodlu bir editördür ve işlevselliğini genişletmek için birçok faydalı eklentiye sahiptir. Ayrıca, özellikle Windows işletim sistemiyle çalışan birçok web tasarımcısı / geliştiricisi tarafından yaygın olarak kullanılmaktadır. Bu yüzden, vurgulayan LESS metni eklemek için ipucunu da eklemeye karar verdim.

LESS-highlight'ı Not Defteri'ne yükleyin++

Notepad ++ 'da LESS renk vurgulamasını etkinleştirmek oldukça kolaydır.

Not Defteri ++ için ilk LESS paketini bu bağlantıdan indirin (userDefineLang_LESS.xml). Sonra şuraya git Görünüm> Kullanıcı Tanımlı Diyalog.

Aşağıdaki açılır kutu görünecektir. Tıkla İthalat… düğmesine basın ve indirdiğiniz yeri bulun .xml dosya. Sonra Not Defteri'ni yeniden başlatın.++.

.Less dosyanızı açın ve Dil menüsüne gidin. Şimdi LESS'in dahil olduğunu görmelisiniz. LESS sözdiziminizde renk vurgulaması uygulamak için seçin.

Daha fazla kaynak

Piyasada birçok editör var. Öyleyse, yukarıdaki editörlerden hiçbirini kullanmazsanız, sizin için bazı faydalı linkleri ekliyoruz.

Adobe Dreamweaver

Kuşkusuz, Dreamweaver'ın çok büyük bir kullanıcı tabanı var. Hem Mac hem de Windows için kullanılabilir. Bu yüzden, eğer bu editörü kullanıyorsanız, Adobe DreamWeaver’da LESS vurgulamasını yüklemek için iyi bir kaynak.

Koda

Mac kullanıyorsanız, Coda'yı muhtemelen biliyorsunuzdur, bu düzenleyici Mac kullanıcıları arasında en popüler olanlardan biridir. Ve, burada LESS’i Coda’ya nasıl kurabileceğiniz.

Geany

Linux kullanıcıları arasında en popüler kod editörlerinden biridir. Ofisimde Linux üzerinde çalışan bazı bilgisayarlar da Geany kullanıyor. Dolayısıyla, onu da kullanırsanız, SuperUser.com'da bu talimatı izleyerek LESS vurgulamayı dahil edebilirsiniz.

2. DAHA AZ Derleyici

Yerleşik LESS derleyicisine sahip ChrunchApp'ın aksine, diğer düzenleyiciler varsayılan olarak bu dosyalara sahip olmazlar. Bunu eklemenin bazı yolları olmasına rağmen, genel kullanıcılar için tekniktir. Yani aldığım en iyi çözüm aşağıdaki araçları kullanarak derlemeyi yapmak: winless veya LESS.app. WinLESS, Windows için tasarlanmış bir derleyicidir, LESS.app ise OSX için üretilmiştir..

Bu araçlar, LESS kodumuzu, dosyayı kaydederken otomatik olarak statik bir CSS'ye dönüştürebilir ve kodda bir hata olup olmadığını doğrudan bildirebilir. Peki, bu aracın ne kadar avuç olduğunu göstereyim:

Öncelikle WinLESS'i indirmek ve kurmak istiyorum.

Klasör ekle düğmesini tıklayın ve koyduğunuz dizini bulun. .az dosyalar (zaten en az bir tane oluşturduğunuzu varsayıyorum). Bir kere eklediğinizde; WinLESS hepsini tarayacak ve bulacaktır .az dosyaları ve listede göster.

Menüye git Dosya> Ayar, ve bu seçeneklerin işaretlendiğinden emin olun;

• Kaydedildiğinde dosyaları otomatik olarak derle
• Başarılı bir derlemede mesajı göster

Başka bir yerde saklamak istemeniz durumunda çıktı klasörünü de ayarlayabiliriz. Ancak, bu örnekte bu seçeneği olduğu gibi bırakacağız; bu, çıktı dosyasının aynı dizine kaydedileceği anlamına gelir. .az dosya.

Aç senin .az Eklenen dizinden dosya, birkaç değişiklik yapın ve kaydedin.

WinLESS, dosya başarıyla derlendiğinde size bilgi verecektir. .css veya kodlarda bir hata varsa. Bu şekilde, kodların derlenmesi için tamamlanmasını beklemek yerine, .css çıktısını doğrudan kontrol edebilirsiniz..

Mac kullanıyorsanız, WinLESS ile aynı işlevselliğe sahip LESS.app dosyasını kullanabilirsiniz..

Önceden Ayarlanmış Karışımlar

Mevcut modern web tasarım uygulamalarında şöyle görünen Gradient, Shadow veya Border Radius gibi CSS3 özelliklerini kullanacağız:

-webkit-border-radius: 3px; -moz-sınır yarıçapı: 3px; sınır yarıçapı: 3px;

veya

arka plan: -moz-doğrusal-gradyan (üst, # f0f9ff% 0, # a1dbff% 100); background: -webkit-linear-gradyan (üst, # f0f9ff% 0, # a1dbff% 100); arka plan: -o-doğrusal-gradyan (üst, # f0f9ff% 0, # a1dbff% 100); arka plan: -ms-linear-gradyan (üst, # f0f9ff% 0, # a1dbff% 100); arka plan: doğrusal gradyan (üst, # f0f9ff% 0, # a1dbff% 100);

Önceki dersimizde, bu sözdizimini basitleştirmek için bazı Mixins'leri yaptık. Neyse ki, web tasarım topluluğundaki bazı insanlar, bu yararlı Mixins'i derlemek için zamanlarını ayıracak kadar cömertler, böylece onu kendimiz sıfırdan derlememiz gerekmez..

Ve favorilerimden biri, birçok yararlı CSS3 ön ayar kuralı içeren Daha Az Elemanlar. Bu nedenle, şimdi sıkıcı satıcı öneklerinden daha az kod satırı yazıyoruz.

Pekala, şimdi, yukarıdaki tüm ipuçlarının gerçekten nasıl yardımcı olabileceğini görelim..

Hepsini bir araya getirmek

Bu örnekte basit bir link butonu oluşturacağım. Öncelikle yeni bir HTML belgesi oluşturmak ve aşağıdaki işaretlemeyi koymak istiyorum:

     Beni tıkla 

Oluşturmak styles.less Ana LESS stil sayfamız olarak, HTML belgemizle aynı klasöre kaydedin ve klasörü WinLESS'e ekleyin..

Alma elements.less bu sözdizimini kullanmadan önce indirdik:

@import "elements.less";

Şimdi elementlerden sağlanan herhangi bir Mixin'i kullanabiliriz. .eğim, .yuvarlak, ve .sınırlanmıştır. Mixins'in adının açıklayıcı olduğuna eminim..

Daha sonra, LESS kurallarını aşağıdaki, stil sayfanıza yerleştirin. Ve bir kez daha sakla

 a display: satır içi blok; dolgu maddesi: 10px 20px; renk: # 555; metin dekorasyon: yok; .b-gradyanı (#eee, 240, 255); .rounded; .bordered; &: gezinip .bw-gradyanı (#eee, 255, 240);  

Bizim beri .az WinLESS'e dosya eklendi, otomatik olarak derlenecek .css. Şimdi sonuçları görelim.

Eh, o kadar da kötü değil, bu düğmenin ihtiyaç duyulandan daha az sayıda satır ile oluşturulduğunu düşünün. Ve işte gerçek üretilen statik CSS:

 a display: satır içi blok; dolgu maddesi: 10px 20px; renk: # 555; metin dekorasyon: yok; arkaplan: #eeeeee; background: -webkit-gradient (doğrusal, sol alt, sol üst, renk durdurma (0, # f0f0f0), renk durdurma (1, #ffffff)); background: -ms-linear-gradyan (alt, # f0f0f0% 0, # f0f0f0% 100); arka plan: -moz-doğrusal-gradyan (merkez alt, # f0f0f0% 0, #ffffff% 100); -webkit-border-radius: 2px; -moz-sınır yarıçapı: 2px; sınır yarıçapı: 2 piksel; -moz-background-clip: dolgu; -webkit-background-clip: dolgu kutusu; arka plan klibi: dolgu kutusu; sınır-üst: katı 1px #eeeeee; sınır-sol: katı 1px #eeeeee; sınır-sağ: katı 1px #eeeeee; sınır-alt: katı 1px #eeeeee;  a: hover background: #eeeeee; background: -webkit-gradient (doğrusal, sol alt, sol üst, renk durağı (0, #ffffff), renk durağı (1, # f0f0f0)); arka plan: -ms-linear-gradyan (alt, #ffffff% 0, #ffffff% 100); arka plan: -moz-doğrusal-gradyan (merkez alt, #ffffff% 0, # f0f0f0% 100); 

Özetle

İşte bu yazıda neler tartıştığımızın kısa bir özeti:

• Mevcut düzenleyicimizdeki sözdizimi vurgulamasını etkinleştirerek, yalnızca LESS sözdizimi oluşturmak için ek bir düzenleyici kurmamız gerekmez; Bu, diskinizde bazı boşluklar / bellek kazandırabilir.
• Ayrıca, son dersimizde olduğu gibi LESS.js Kütüphanesini HTML başlığımıza indirmemize ve bağlamamız gerekmiyor. Bu şekilde, HTML dokümanımız temiz ve düzenli kalır.
• WinLESS ve LESS.app gibi derleyici araçlarını kullanmak, statik CSS çıktısını anında üretebilir. Yani, sözdiziminde yanlış bir şey varsa, hemen inceleyebiliriz..
• LESS Elements gibi Preset Mixins en iyi arkadaşımız. Gerçekten sıkıcı CSS3 özelliğini derlerken zaman kazanabiliyoruz.

.