LESS CSS Eğitimi Kaygan bir Menü Tasarımı Gezinme çubuğu

Bu makale bizim bölümümüzün bir parçası. "HTML5 / CSS3 Dersleri serisi" - sizi daha iyi bir tasarımcı ve / veya geliştirici yapmanıza yardımcı olmak için. Buraya TIKLAYIN Aynı serideki daha fazla makale görmek için.

Web tasarım ve geliştirme dünyası gerçekten hızla gelişiyor. Bunu, toplumda (hemen hemen her gün) başlatılan birçok yeni şeyde görebiliriz; web tasarımcıları veya geliştiricileri olarak günlük işlerimizi daha etkin ve verimli hale getirmeye yardımcı olan Uygulamalar veya yeni Çerçeveler.

Bugün dikkatimi web tasarımının geliştirilmesinden çekenlerden biri, Değişkenler, Karışımlar, İşlevler ve İşlemler gibi bazı programlama kavramlarını birleştirerek CSS sözdizimini yazma biçimimizi genişleten programlanabilir bir stil sayfası dili olan LESS'dir..

CSS sözdizimi yazarken yeni yetenekler açar. Örneğin, CSS'de Mixins'i bir programda yaptığımız gibi uygulayarak, artık mümkün olduğunda tüm dosyaya uygulanabilecek varsayılan stilleri ve değerleri depolayabiliriz. Bununla aynı stilleri tekrar tekrar yazmamız gerekmeyecek..

Peki, sunabileceklerini daha iyi anlamak için LESS ile ilgili bazı egzersizler yapalım..

LESS ile Tasarım

Bu derste, Apple.com'daki web sitesinden ilham alan şık bir menü gezinme çubuğu tasarlamaya çalışacağız. Sadece orijinal üründen 'ilham' aldığı için, son eğitim ürünümüzün orijinal ürünle tamamen aynı olmayacağını unutmayın..

Başlamak için, önce aşağıdaki yardımcı kaynakları okumak isteyebilirsiniz. LESS dilinin bazı temel uygulamalarını açıklarlar, bu eğitime devam etmeden önce size yardımcı olacaktır..

• LESS Daha Fazlası: LSS ile CSS Kodunuzu Kolaylaştırın
• Daha Azıyla Daha İyi CSS Yazın
• LESS'e Giriş ve Sass ile Karşılaştırma

Hazırlık

Her şeyden önce, bu küçük proje için ihtiyacımız olan bazı temel şeyler var, yani:

1. LESS Metin Düzenleyicisi

Navigasyon menüsünü kodlamak için bir metin editörüne ihtiyacımız olacak. Ancak, bugün piyasada bulunan metin editörlerinin çoğu (Dreamweaver, Notepad ++, InType, Sublime Text 2 gibi) henüz desteklenmedi. .az dosya uzantıları varsayılan olarak olduğundan, sözdizimi iyi vurgulanamayabilir.

Bu yüzden, bu eğitimin amacı için, ChrunchApp adlı LESS için özel bir metin editörü kullanacağız. Açabilir ve düzenleyebiliriz .az dosyaları uzatarak bu uygulamayı kullanarak statik CSS'ye derleyin. Bir Adobe Air uygulaması olduğundan, her büyük masaüstü işletim sistemine kurulabilir (Win, OSX ve Linux).

HTML editörü için, şu anda kullanmakta rahat olduğunuz herhangi bir editörü kullanabilirsiniz. Şahsen Sublime Text 2'yi severim.

2. Less.js

Daha sonra, LESS JavaScript Library'yi resmi web sitesinden indirin, güncel sürüm 1.2.1. Bunun için alıştırma klasörünüze yerleştirin.

Ardından dosyayı HTML belgesine bağlayın.

3. Ön eksiz

Ayrıca satıcı öneklerini içerecek olan gezinti menüsünde bazı efektleri gerçekleştirmek için birkaç CSS3 özelliğini kullanacağız (-moz-, -O-, -webkit-) farklı tarayıcılarda doğru görüntülenmesi için. Ancak, kişisel olarak CSS dosyasını şişireceği için önekleri kullanmayı tercih etmiyorum.

Bu sebeple, Lea Verou tarafından yaratılan ve önekleri otomatik olarak arka planda tutacak bir JavaScript kütüphanesi olan ön eksiz kullanmaya karar verdim. Bu yüzden sadece W3C’den resmi sözdizimini yazmamız gerekecek..

Dosyayı indirin ve HTML dosyasına bağlayın.

Tamam, hepimiz hazırız; şimdi HTML işaretlemesini yapılandırmaya başlayalım.

HTML İşaretlemesi

Gezinme oldukça basittir. Sırasız bir liste etiketi içine sarılmış beş menüye sahip olacaktır. En sevdiğiniz HTML editörünü açın ve aşağıdaki işaretlemeyi koyun:

Az stil

Bu bölümde navigasyonu LESS dili ile şekillendirmeye başlayacağız. Programlama benzeri bir dilde yeni olanlar için, LESS ile CSS sözdizimi yazmak biraz garip ve garip hissettirir. Ancak endişelenmeyin, biraz pratik yaptıktan sonra, kesinlikle saf CSS yazma yöntemimizden daha eğlenceli olacak (bu benim deneyimim, aynı zamanda biraz bağımlılık yapar).

Gezinme tarzını ilham kaynağımızdan inceleyelim..

Yukarıdaki ekran görüntüsünde görebileceğimiz gibi, Apple.com navigasyonunda şu ana 6 stil vardır:

• gölge
• sınır
• bölen
• gradyanları
• vurgulu etkisi
• Metin

Bu stilleri saklayacağız ve içine kaydedeceğiz config.less varsayılan stil olarak Yapılandırma; bazı tasarımcılar da adlandırabilir lib.css bunun anlamı Kütüphane. Bu dosyayı dokümanımıza bağla.

LESS JavaScript kitaplığından önce yerleştirdiğinizden emin olun..

Renk Tabanını Değişkenlerle Tanımla

Bu adımda değişken renklerini kullanarak navigasyon renk tabanını tanımlayacağız. LESS içindeki değişken, kullanılarak bildirilir. @ sembol.

Tema: # 555;

Bu @tema değişken bizim standart rengimizdir; mükemmel renk düzenini kuyruklamak için mümkün olan her şekilde kullanacağız ve böylece renk kompozisyonunun daha tutarlı olması bekleniyor.

Mixins ile Varsayılan Gölge Stili Tanımla

LESS'den sevdiğim özelliklerden biri de Mixins. LESS'te daha sonra stil sayfasında sınıflara veya kimlikleri miras alabilen önceden tanımlanmış birkaç stilin depolandığı bir programlama konseptidir..

.shadow box-shadow: 0 1px 2px 0 @theme; 

Yukarıdaki kodun ön ekini dahil etmedim. kutu gölge özellik, çünkü öneksiz kütüphane bunları otomatik olarak idare eder. Ayrıca, gölge rengi tema değişkeni renginden miras alınır.

Parametrik Karışımlarla Sınır Stilini Tanımla

Gezinti çubuğunun hafif yuvarlatılmış bir köşesi olan ayrı bir kenarlık rengine ihtiyacı olacaktır. Parametrik Karışımları kullanarak sınır stilini derleyebiliriz. Aslında Mixins ile aynı işlevselliğe sahip, sadece fark, aynı zamanda değişken parametrelere sahip olmasıdır, böylece değerler daha ayarlanabilir.

.border (@radius: 3px) border-radius: @radius; sınır: 1px katı @theme - # 050505; 

Yukarıdaki kodda, varsayılan sınırı belirledik @radius için 3px ve daha önce de belirttiğimiz gibi, bu değer daha sonra değiştirilebilir.

İşlemle Degrade, Ayırıcı ve Vurgu Stilini Tanımla

Operasyon sadece istenen sonucu elde etmek için Toplama, Bölme, Çıkarma ve Çarpma gibi matematiksel formülleri uygulayabildiğimiz bir programlama dilidir. Aşağıdaki koda bir göz atalım:

.bölücü border-style: katı; kenarlık genişliği: 0 1 piksel 0 1 piksel; kenarlık rengi: saydam @theme - # 111 saydam @theme + # 333; 

Yukarıdaki kodda çıkartıyoruz @tema değişken # 111, bu şekilde sol kenarlık rengi çıktısı biraz daha koyu olur. Sağ kenarlık rengi ilavesinden elde edilirken @tema onaltılık renkle değişken # 333, çıktı daha hafif olurdu.

Renk Düzeni Seviyesi

Pekala, bazılarınız için formüllerle karıştırılabilecek, daha iyi bir anlayış elde etmek için aşağıdaki renk şeması şemasını inceleyelim:

Maksimum koyu ton # 000 (siyah), maksimum hafif #fff (beyaz) ve mevcut renk tabanımız # 555. Öyleyse, renk tabanının olmasını istiyorsak 3 Şu anki seviyeden daha koyu olan seviyeleri, basitçe # 333. Aynı şekilde rengi hafifletmek için de uygulanabilir.

Sonra, gradyan rengini çalıştıracağız.

.gradyan background: linear-gradyan (üst, @theme + # 252525% 0, @theme + # 171717% 50, @theme - # 010101% 51, @theme + # 151515% 100);  .hovereffect background: linear-gradyan (üst, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222% 51, @theme - # 050505% 100); 

Guard Mixins ile Metin Stili Tanımla

Gezinti çubuğunda 2 renge sahip olmayı planlıyoruz, koyu renk ve bir ışık. Guard Mixins kullanarak metin için iki koşullu ifade uyguluyoruz..

İlk olarak, metne% 50 veya daha fazla açıklığa sahip bir renk verildiğinde, Metin gölgesi bu durumda renk kararmalıdır # 000000.

.textcolor (@txtcolor) when (lightness (@txtcolor)> =% 50) renk: @txtcolor; metin-gölge: 1 piksel 1 piksel 0 piksel # 000000; 

Sonra, metne açıklığın% 50'den az olduğu bir renk verildiğinde Metin gölgesi beyaz olacak.

.textcolor (@txtcolor) when (lightness (@txtcolor)) 
LESS'i İçe Aktarma
 
Şimdi başka bir tane yaratalım .az adlı dosya styles.less ve ithalat config.less bunun içine:
 
@import "config.less";
 
Yazı Tipi Ailesi Ekle
 
Gezinti çubuğunun daha çekici görünmesi için, kullanarak yeni bir font ailesi ekleyeceğiz. @ Font-face kural. şaşırtıcı biçimde, @ Font-face Kural aslında IE6’dan beri zaten destekleniyor.!
 
Bu sefer Asap yazı tipini kullanacağız. Font Squirrel's font yüz koleksiyonundan indirin. Ardından, yeni yarattığımız biçime aşağıdaki stilleri ekleyin styles.less dosya.
 
@ font-face font-ailesi: 'AsapRegular'; src: url ( 'yazı / asap-Düzenli-webfont.eot'); src: url ('yazı tipleri / Asap-Normal-webfont.eot? #iefix') formatı ('gömülü-opentype') biçiminde, url ('yazı tipleri / Asap-Düzenli-webfont.woff') biçiminde ('woff'), url ('fontlar / Asap-Normal-webfont.ttf') formatı ('truetype'), url ('fontlar / Asap-Normal-webfont.svg # AsapRegular') formatı ('svg'); yazı tipi ağırlığı: normal; yazı tipi stili: normal;  
 
Vücudu Renk İşlevleriyle Düzenleme
 
Şimdi, arka plan rengini vücut (bu, renk tabanından daha hafif olması gerekir) yazı tipi ailesini ve yazı tipi boyutunu da belirtir. Renk işlevlerini kullanarak efektlere yaklaşabiliriz:
 
Aşağıdaki kod arka planı% 30 oranında aydınlatacak.
 
body background: lighten (@,% 30); font-family: AsapRegular, sans-serif; yazı tipi boyutu: 11pt; 
 
 
 
Gezinmeyi İç İçe Kural ile Düzenleme
 
LESS'te stilleri doğrudan üst öğesinin altına yerleştirebiliriz. Aşağıdaki koda bir göz atalım.
 
 nav Gezinme için gerekli tüm unsurları içeren etikete aşağıdaki stiller verilecektir..
 
nav marj: 50 piksel otomatik 0; genişlik: 788px; yükseklik: 45px; .border; .gölge; 
 
Dikkat edin, yine bir sürü CSS kuralı vermek yerine, sadece ekledim. .sınır sınır stilini vermek .gölge Gölge eklemek için Gerçek durumlarda, bu sınıflar kümesi, ihtiyaç duyulan her yerde, başka bir elementte tekrar kullanılabilir..
 
 
 
Sonra, biz stilleri veriyoruz ul içinde nav sıfır doldurma ve boşluğa sahip olmak. Çok uzun zaman önce, böyle bir şey yazarak stile yaklaşacağız:
 
nav … nav ul …
 
Bu yaklaşımda yanlış olan bir şey yok, aslında bunu her zaman yapardım ve oldukça rahatım. Bununla birlikte, birçok CSS tasarımcısının söylediği gibi, bu yöntem açıklanmaktadır ve bazı durumlarda kolayca yönetilemez.
 
Şimdi, böyle bir şey yapabiliriz:
 
nav marj: 50 piksel otomatik 0; genişlik: 788px; yükseklik: 45px; .border; .gölge; ul dolgu maddesi: 0; marj: 0; 
 
 
 
Ve sonra menü kullanılarak üst üste görüntülenecektir görüntüleme: satır içi özellik.
 
nav marj: 50 piksel otomatik 0; genişlik: 788px; yükseklik: 45px; .border; .gölge; ul dolgu maddesi: 0; marj: 0; li display: satır içi; 
 
 
 
Aşağıdaki sözdiziminde, menü bağlantı etiketi stilini belirler ve önceden tanımlanmış stillerimizi ekleriz, bunlar: .metin rengi, .bölen, .eğim.
 
nav marj: 50 piksel otomatik 0; genişlik: 788px; yükseklik: 45px; .border; .gölge; ul dolgu maddesi: 0; marj: 0; li display: satır içi; bir text-decoration: none; ekran: satır içi blok; şamandıra: sol; genişlik: 156px; yükseklik: 45px; metin hizalama: orta; çizgi yüksekliği:% 300; .textcolor (# f2f2f2); // Bu satırı değiştirebilirsiniz .divider; .gradient; 
 
Yukarıdaki kodda onaltılık renk uygulanır # f2f2f2 ışığın% 50'nin üzerinde olduğu düşünülürse, gölgenin karanlık görünmesini bekleriz (otomatik olarak). Eminim kodun geri kalanı oldukça açıklayıcıdır..
 
 
 
Bununla birlikte, yukarıdaki güncel sonuçlara bakacak olursak, menülerin her birinde bölücüler bulunur, bu nedenle son bölüm tabana taşar. Bu yüzden gezinti çubuğunun ilk ve son çocuğu için sınır stilini atlamalıyız..
 
nav marj: 50 piksel otomatik 0; genişlik: 788px; yükseklik: 45px; .border; .gölge; ul dolgu maddesi: 0; marj: 0; li display: satır içi; bir text-decoration: none; ekran: satır içi blok; şamandıra: sol; genişlik: 156px; yükseklik: 45px; metin hizalama: orta; çizgi yüksekliği:% 300; .textcolor (# f2f2f2); // Bu satırı değiştirebilirsiniz .divider; .gradient;  li: ilk çocuk a kenar-sol: none;  li: son çocuk bir border-right: none; 
 
 
 
Vurgulu devlet
 
Son adım için vurgulu efekti ekleyeceğiz. LESS’e ekleyebiliriz sözde eleman gibi : hover kullanma & sembol.
 
nav marj: 50 piksel otomatik 0; genişlik: 788px; yükseklik: 45px; .border; .gölge; ul dolgu maddesi: 0; marj: 0; li display: satır içi; bir text-decoration: none; ekran: satır içi blok; şamandıra: sol; genişlik: 156px; yükseklik: 45px; metin hizalama: orta; çizgi yüksekliği:% 300; .textcolor (# f2f2f2); // Bu satırı değiştirebilirsiniz .divider; .gradient; &: hover .hovereffect;  li: ilk çocuk kenar-sol: yok;  li: son çocuk bir border-right: none; 
 
 
 
Renk temasını değiştirin
 
İşte LESS'in havalı kısmı. Genel renk temasını değiştirmek istiyorsak, saf CSS'de ihtiyacımız olandan daha az satır değişikliği yaparak yapabiliriz..
 
Bu durumda, navigasyon rengini biraz daha açık olacak şekilde değiştireceğim. Basitçe aşağıdaki iki satırı değiştir.
 
@theme: #ccc; //Bunu değiştir
 
.metin rengi (# 555); //Ve bu
 
Ve işte sonuç.
 
 
 
LSS'yi CSS'ye derleyin
 
Hala LESS JavaScript’i kullanırken, .az standart tarayıcının yorumlayabilmesi için dosyalayın ve statik CSS'ye çevirin. Bu, müşteri tarafında çifte bir iştir, gereksiz ve israf bant genişliğinden bahsetmez. LESS'in asıl amacı, statik CSS'yi daha dinamik ve programlanabilir hale getirmek için uygulamamızı basitleştirmek için iş akışında.
 
Bu nedenle, gezinti çubuğunu bir web sitesinde canlı olarak yayınlamak üzereyken, LESS dosyasını statik CSS'de derlemek önemlidir..
 
Tıkla Crunch It! büyük düğme.
 
 
 
.Less dosyasını egzersiz dosyamızda kaydedin, HTML belgesine bağlayın ve bağlantıyı kaldırın. .az & less.js belgeden dosya.
 
 .shadow box-shadow: 0 1px 2px 0 # 555555;  .divider kenarlık stili: sağlam; kenarlık genişliği: 0 1 piksel 0 1 piksel; kenarlık rengi: saydam # 444444 saydam # 888888;  .gradient background: linear-gradyan (üst, # 7a7a7a% 0, # 6c6c6c% 50, # 545454% 51, # 6a6a6a% 100);  .hovereffect background: linear-gradyan (üst, # 545454% 0, # 434343% 50, # 333333% 51, # 505050%);  @ font-face font-ailesi: 'AsapRegular'; src: url ('yazı tipleri / Asap-Normal-webfont.eot'); src: url ('yazı tipleri / Asap-Normal-webfont.eot? #iefix') formatı ('gömülü-opentype') formatı, url ('yazı tipleri / Asap-Normal-webfont.woff') formatı ('woff'), url ('fontlar / Asap-Normal-webfont.ttf') formatı ('truetype'), url ('fontlar / Asap-Normal-webfont.svg # AsapRegular') formatı ('svg'); yazı tipi ağırlığı: normal; yazı tipi stili: normal;  vücut arka plan: # a2a2a2; font-family: AsapRegular, sans-serif; yazı tipi boyutu: 11pt;  nav marj: 50 piksel otomatik 0; genişlik: 788px; yükseklik: 45px; sınır yarıçapı: 3px; sınır: 1px katı # 505050; kutu-gölge: 0 1px 2px 0 # 555555;  nav ul doldurma: 0; marj: 0;  nav ul li görüntüleme: satır içi;  nav ul li a text-decoration: none; ekran: satır içi blok; şamandıra: sol; genişlik: 156px; yükseklik: 45px; metin hizalama: orta; çizgi yüksekliği:% 300; renk: # f2f2f2; metin-gölge: 1 piksel 1 piksel 0 piksel # 000000; sınır tarzı: katı; kenarlık genişliği: 0 1 piksel 0 1 piksel; kenarlık rengi: saydam # 444444 saydam # 888888; arka plan: doğrusal gradyan (üst, # 7a7a7a% 0, # 6c6c6c% 50, # 545454% 51, # 6a6a6a% 100);  nav ul li a: vurgulu background: linear-gradyan (üst, # 545454% 0, # 434343% 50, # 333333% 51, # 505050% 100);  nav ul li: ilk çocuk a kenarlık solu: yok;  nav ul li: son çocuk bir border-right: none;  
 
Sonucu tekrar araştıralım.
 
 
 
Ve biz bitti, lütfen denemekten çekinmeyin.
 
Sonuç
 
Bugün LESS dili hakkında birçok şey öğrendik, örneğin:
 

• Değişkenler.
• Katmalar
• Parametrik Karışımlar
• Operasyonlar
• Korumalı Karışımlar
• Ve İç İçe Kurallar

Daha fazla ele alınabilecek birçok şey ve gösterilip açıklanacak birçok imkan olmasına rağmen, bu temel eğitimden hoşlandığınızı umuyoruz.

• gösteri
• İndirme kaynağı