LESS CSS Tutorial Dizajniranje Slick trake za navigaciju izbornika

Ovaj članak je dio našeg "Serija vodiča za HTML5 / CSS3" - posvećeni pomoći da postanete bolji dizajner i / ili programer. Kliknite ovdje da biste vidjeli više članaka iz iste serije.

Web dizajn i razvoj svijeta se stvarno brzo razvija. To možemo vidjeti u velikom broju novih stvari koje se pokreću u zajednici (gotovo) svakodnevno, bilo da se radi o aplikacijama ili novim okvirima koji pomažu da naš svakodnevni posao kao web-dizajnera ili programera postane učinkovitiji i učinkovitiji.

Ono što mi je privuklo pozornost od razvoja web dizajna danas je LESS, programabilni stilski jezik koji proširuje način na koji pišemo CSS sintaksu kombinirajući neke koncepte programiranja kao što su varijable, Mixins, Funkcije i operacije.

Otvara nove mogućnosti u pisanju CSS sintakse. Primjerice, primjenom Mixins-a u CSS-u kao što to radimo u programu, sada možemo pohraniti zadane stilove i vrijednosti koje se mogu primijeniti u cijeloj datoteci kad god je to moguće. Time nećemo morati stalno pisati iste stilove.

Pa, učinimo neke vježbe s MANJEM kako bismo dobili bolji uvid u ono što nudi.

Projektiranje s MANJIM

U ovom tutorialu pokušat ćemo osmisliti elegantnu navigacijsku traku izbornika koja je inspirirana onom u Apple.com. Budući da je izvorni proizvod samo "nadahnut", imajte na umu da naš konačni proizvod neće biti isti kao izvorni proizvod.

Da biste započeli, prvo biste željeli pročitati sljedeće korisne resurse. Oni objašnjavaju neke osnovne implementacije jezika LESS, koji će vam biti od pomoći prije nego što krenete dalje u ovaj vodič.

• MANJE je više: Učinite vaš CSS kodiranje lakšim uz manje
• Napišite bolje CSS s manje
• Uvod u manje, i usporedba s Sass

priprema

Prije svega, postoje neke bitne stvari koje su nam potrebne za ovaj mali projekt:

1. LESS Text Editor

Trebat ćemo uređivač teksta za kodiranje navigacijskog izbornika. Međutim, većina tekstualnih uređivača koji su danas dostupni na tržištu (kao što su Dreamweaver, Notepad ++, InType, Sublime Text 2) tek trebaju podržati .manje ekstenzije datoteka po zadanom, tako da sintaksa možda neće biti dobro označena.

Dakle, za potrebe ovog vodiča koristit ćemo poseban uređivač teksta za LESS pod nazivom ChrunchApp. Možemo otvoriti i urediti .manje proširenje datoteka i kompajlirati ga u statički CSS koristeći ovu aplikaciju. Budući da se radi o aplikaciji Adobe Air, može se instalirati u sve glavne operacijske sustave (Win, OSX i Linux)..

Za uređivač HTML-a možete koristiti bilo koji uređivač koji vam već sada odgovara. Ja osobno volim uzvišeni tekst 2.

2. Less.js

Zatim preuzmite knjižnicu LESS JavaScript s njihove službene web stranice, trenutna verzija je 1.2.1. Stavite ga u vašu mapu prakse za ovo.

Zatim povežite datoteku s HTML dokumentom.

3. Bez prefiksa

Također ćemo upotrijebiti nekoliko značajki CSS3 kako bismo ostvarili neke efekte u navigacijskom izborniku koji će uključivati ​​prefiksove dobavljača (-moz-, -o-, -WebKit-) da bi se ispravno prikazivao u različitim preglednicima. Međutim, ja osobno ne korist prefiksa kao što će nadimati CSS datoteku.

Iz tog razloga odlučio sam koristiti JavaScript biblioteku koju je stvorio Lea Verou bez prefiksa i koja će automatski upravljati prefiksima dobavljača u pozadini. Stoga ćemo morati napisati službenu sintaksu iz W3C.

Preuzmite datoteku i povežite je s HTML datotekom.

U redu, svi smo spremni; sada počnimo s strukturiranjem HTML oznake.

HTML oznaka

Navigacija je vrlo jednostavna. Imat će pet izbornika umotanih u neuređenu oznaku popisa. Otvorite svoj omiljeni HTML uređivač i stavite sljedeći označivač:

LESS Styling

U ovom odjeljku započet ćemo stiliziranje navigacije jezikom LESS. Za one koji su novi u jeziku sličnom programiranju, pisanje CSS sintakse s MANJIM osjeća se pomalo čudno i nezgodno. Ali ne brinite, jednom kada budete vježbali, sigurno će vam biti ugodnije od načina na koji pišemo čist CSS (to je moje iskustvo, također je malo zarazna).

Razmotrimo stil navigacije iz našeg izvora inspiracije.

Kao što možemo vidjeti na slici iznad, navigacija Apple.com ima sljedećih 6 glavnih zajedničkih stilova:

• sjena
• granica
• šestar
• gradijenti
• efekt lebdenja
• tekst

Spremit ćemo te stilove i spremiti ih unutra config.less kao zadani stil Konfiguracija; neki dizajneri bi je također mogli nazvati lib.css što se zalaže Knjižnica. Povežite ovu datoteku s našim dokumentom.

Provjerite jeste li ga postavili pred knjižnicu LESS JavaScript.

Definirajte bazu boja s varijablama

U ovom koraku definirat ćemo bazu navigacijskih boja pomoću varijabli. Varijabla u LESS-u se deklarira pomoću @ simbol.

@theme: # 555;

Ovaj @tema varijabla je naša standardna boja; koristit ćemo ga na svaki mogući način kako bismo pratili savršenu shemu boja i kako bi se očekivalo da sastav boje postane dosljedniji.

Definirajte zadani stil sjena s mješavinama

Jedna od značajki koje volim od LESS-a je Mixins. To je koncept programiranja koji pohranjuje nekoliko unaprijed definiranih stilova koji se u LESS-u mogu naslijediti u klasama ili ID-ovima kasnije u stilu.

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

U gore navedenom kodu nisam uključio prefiksnu verziju kutija-sjena vlasništvo, jer će biblioteka bez prefiksa obraditi ih automatski. Također, boja sjene naslijeđena je od boje varijable teme.

Definirajte stil obruba s parametričnim mješavinama

Navigacijska traka će trebati izrazitu boju obruba s blago zaobljenim kutom. Stil obruba možemo sastaviti pomoću parametarskih mješavina. Zapravo ima istu funkcionalnost kao i Mixins, samo što ima i promjenjive parametre pa su vrijednosti podesive.

.granica (@radius: 3px) border-radius: @radius; granica: 1px solid @theme - # 050505; 

U gornjem kodu postavljamo zadanu granicu @radius za 3px i kao što smo već spomenuli, ova se vrijednost može kasnije promijeniti.

Definirajte Gradient, Divider i Hover stil rada

Operacija je jednostavno programski jezik gdje možemo primijeniti matematičku formulu kao što su Dodavanje, Odvajanje, Oduzimanje i Množenje kako bi dobili željeni rezultat. Pogledajmo sljedeći kôd:

.razdjelnik granični stil: čvrsti; granica-širina: 0 1px 0 1px; border-color: transparent @theme - # 111 transparent @theme + # 333; 

U gornjem kodu oduzimamo @tema varijabla prema # 111, na taj način boji lijevog obruba bit će malo tamnija. Iako je prava boja obruba izvedena iz dodatka @tema varijabla sa hex bojom # 333, izlaz bi bio lakši.

Razina sheme boja

Pa, za neke od vas koji bi mogli biti zbunjeni s formulama, pregledajmo dijagram sheme boja u nastavku da bismo bolje razumjeli:

Maksimalni tamni ton je # 000 (crno), dok je maksimalni svjetlosni ton #F F F (bijelo) i naša trenutna boja je # 555. Dakle, ako želimo da boja bude 3 razine tamnije od struje, možemo ih jednostavno oduzeti # 333. Isto se može primijeniti i za posvjetljivanje boje.

Zatim ćemo upravljati bojom gradijenta.

.gradijent pozadina: linearno-gradijent (vrh, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 151515 100%);  .hovereffect pozadina: linearno-gradijent (vrh, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Definirajte stil teksta s mješavinama za zaštitu

Planiramo imati 2 boje na navigacijskoj traci, ne tamnu boju i jednu svjetlost. Primjenjujemo dva uvjetna izraza za tekst koristeći Guard Mixins.

Prvo, kada je tekst dan boji koja ima svjetlinu jednaku ili veću od 50%, text-shadow trebala bi postati tamna, u ovom slučaju boja # 000000.

.textcolor (@txtcolor) kada (svjetlina (@txtcolor)> = 50%) (boja: @txtcolor; tekst-sjena: 1px 1px 0px # 000000; 

Zatim, kada je tekst dan boji, svjetlost je manja od 50% text-shadow će postati bijela.

.textcolor (@txtcolor) kada (svjetlina (@txtcolor)) 
Uvoz LESS
 
Napravimo sada drugi .manje ime datoteke styles.less i uvoz config.less u nju:
 
@import "config.less";
 
Dodaj obitelj fonta
 
Kako bi navigacijska traka izgledala privlačnije, koristit ćemo novu obitelj fontova 'Font-lica Pravilo. Iznenađujuče, 'Font-lica Pravilo je zapravo već podržano od IE6!
 
Ovaj put ćemo koristiti Asap font. Preuzmite je iz kolekcije fontova Font Squirrel. Zatim umetnite sljedeće stilove u naš nedavno stvoren styles.less datoteka.
 
@ font-face font-family: 'AsapRegular'; src: url ( 'fontovi / ASAP-regularna webfont.eot'); format src: url ('fonts / Asap-Regular-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonts / Asap-Regular-webfont.woff') format ('woff'), URL ('fonts / Asap-Regular-webfont.ttf') format ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') format ('svg'); težina fonta: normalna; font-style: normal;  
 
Stiliziranje tijela s funkcijama boje
 
Sada ćemo dati boju pozadine tijelo (koja bi trebala biti lakša od baze boja), kao i navođenje obitelji fonta i veličine fonta. Možemo pristupiti efektu pomoću funkcija boja:
 
Sljedeći kôd olakšat će pozadinu za 30%.
 
tijelo pozadina: osvijetli (@theme, 30%); obitelj fonta: AsapRegular, sans-serif; veličina fonta: 11pt; 
 
 
 
Stiliziranje navigacije s ugniježđenim pravilom
 
U LESS-u možemo gnijezditi stilove izravno pod njegovim nadređenim. Pogledajmo kod ispod.
 
 nav oznaka koja sadrži sve potrebne elemente za navigaciju dobit će sljedeće stilove.
 
nav margin: 50px auto 0; širina: 788px; visina: 45px; .granica; .sjena; 
 
Primijetite da sam umjesto toga dodao hrpu CSS pravila, samo sam umetnuo .granica dati stil i granicu .sjena za dodavanje sjene. U stvarnim slučajevima, ovi skupovi klasa mogu se ponovno upotrijebiti iu drugom elementu, gdje god je to potrebno.
 
 
 
Zatim dajemo stilove za ul unutar nav imati nulu padding i margin. Ne tako davno pristupat ćemo stilu pišući nešto poput ovoga:
 
nav … nav ul …
 
Nema ničeg lošeg u ovom pristupu, zapravo sam to činio svaki put i prilično mi je ugodno. Međutim, ova metoda, mnogi su dizajneri CSS-a rekli, je verbosedana i, u nekim slučajevima, nije lako upravljiva.
 
Sada možemo učiniti nešto poput ovoga:
 
nav margin: 50px auto 0; širina: 788px; visina: 45px; .granica; .sjena; ul punjenje: 0; margina: 0; 
 
 
 
A onda će se izbornik prikazati u nizu pomoću prikaz: inline svojstvo.
 
nav margin: 50px auto 0; širina: 788px; visina: 45px; .granica; .sjena; ul punjenje: 0; margina: 0; li display: inline; 
 
 
 
U sintaksi u nastavku navodimo stil oznake sidra izbornika i dodamo unaprijed definirane stilove, a to su: .textcolor, .šestar, .gradijent.
 
nav margin: 50px auto 0; širina: 788px; visina: 45px; .granica; .sjena; ul punjenje: 0; margina: 0; li display: inline; a text-decoration: none; prikaz: inline-blok; plutajući: lijevo; širina: 156px; visina: 45px; poravnavanje teksta: centar; visina linije: 300%; .textcolor (# f2f2f2); // Možete promijeniti ovu liniju .divider; .gradijent; 
 
U gornjem kodu primjenjujemo heksadecimalnu boju # f2f2f2 u kojoj se svjetlost smatra iznad 50%, tako da bismo očekivali da sjena postane tamna (automatski). Siguran sam da je ostatak koda sasvim razumljiv.
 
 
 
Međutim, ako pogledamo gore navedeni rezultat, svaki od izbornika ima razdjelnike, što rezultira time da se posljednji dio prelijeva do dna. Stoga moramo izostaviti stil obruba za prvo i posljednje dijete navigacijske trake.
 
nav margin: 50px auto 0; širina: 788px; visina: 45px; .granica; .sjena; ul punjenje: 0; margina: 0; li display: inline; a text-decoration: none; prikaz: inline-blok; plutajući: lijevo; širina: 156px; visina: 45px; poravnavanje teksta: centar; visina linije: 300%; .textcolor (# f2f2f2); // Možete promijeniti ovu liniju .divider; .gradijent;  li: prvo dijete border-left: none;  li: posljednje dijete granično pravo: nema; 
 
 
 
Hover State
 
Za posljednji korak dodat ćemo učinak lebdenja. U LESS možemo dodati pseudo elemenata kao što su : hover koristeći & simbol.
 
nav margin: 50px auto 0; širina: 788px; visina: 45px; .granica; .sjena; ul punjenje: 0; margina: 0; li display: inline; a text-decoration: none; prikaz: inline-blok; plutajući: lijevo; širina: 156px; visina: 45px; poravnavanje teksta: centar; visina linije: 300%; .textcolor (# f2f2f2); // Možete promijeniti ovu liniju .divider; .gradijent; &: hover .hovereffect;  li: prvo dijete border-left: none;  li: posljednje dijete granično pravo: nema; 
 
 
 
Promijenite temu boje
 
Ovdje je cool dio MANJE. Ako želimo promijeniti ukupnu temu boje, to možemo učiniti u manje izmjena redaka nego što nam je potrebno u čistom CSS-u.
 
U ovom slučaju, promijenit ću boju navigacije da bude malo lakša. Jednostavno promijenite sljedeća dva retka.
 
@theme: #ccc; // Promijeni ovo
 
.textcolor (# 555); //I to
 
I ovdje je rezultat.
 
 
 
Sastavite manje u CSS-u
 
Kada još uvijek koristimo manji JavaScript, on će zgrabiti .manje datoteku i prevedite je u statički CSS tako da ga standardni interpretator može interpretirati. Ovo je dvostruki posao na strani klijenta, a da ne spominjemo suvišnu i rasipnu propusnost. Glavna točka LESS-a je u tijeku rada kako bi se pojednostavila naša praksa u kompiliranju statičnog CSS-a kako bi bila dinamičnija i programabilnija.
 
Dakle, kada namjeravamo postaviti navigacijsku traku uživo na web-lokaciju, važno je kompajlirati LESS datoteku u statički CSS.
 
Kliknite gumb Slomite ga! veliki gumb.
 
 
 
Spremite .less u našu datoteku vježbanja, povežite ga s HTML dokumentom i uklonite vezu .manje & less.js datoteku iz dokumenta.
 
 .sjena kutija-sjena: 0 1px 2px 0 # 555555;  .divider border-style: solid; granica-širina: 0 1px 0 1px; boja obruba: transparentna # 444444 transparent # 888888;  .gradient pozadina: linearno-gradijent (gore, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect pozadina: linearni gradijent (gore, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'); format src: url ('fonts / Asap-Regular-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonts / Asap-Regular-webfont.woff') format ('woff'), URL ('fonts / Asap-Regular-webfont.ttf') format ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') format ('svg'); težina fonta: normalna; font-style: normal;  tijelo pozadina: # a2a2a2; obitelj fonta: AsapRegular, sans-serif; veličina fonta: 11pt;  nav margin: 50px auto 0; širina: 788px; visina: 45px; granični polumjer: 3px; granica: 1px solid # 505050; kutija-sjena: 0 1px 2px 0 # 555555;  nav ul punjenje: 0; margina: 0;  nav ul li prikaz: inline;  nav ul li a text-decoration: none; prikaz: inline-blok; plutajući: lijevo; širina: 156px; visina: 45px; poravnavanje teksta: centar; visina linije: 300%; boja: # f2f2f2; tekst-sjena: 1px 1px 0px # 000000; granični stil: čvrst; granica-širina: 0 1px 0 1px; boja obruba: transparentna # 444444 transparent # 888888; pozadina: linearni gradijent (gore, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  Navigacija: lebdenje (pozadina: linearno-gradijent (vrh, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: prvo dijete border-left: none;  nav ul li: posljednje dijete border-right: none;  
 
Pogledajmo još jednom rezultat.
 
 
 
I završili smo, slobodno eksperimentirajte s njom.
 
Zaključak
 
Danas smo naučili mnogo toga o LESS jeziku, kao što su:
 

• Varijable.
• Mixins
• Parametarski miksovi
• operacije
• Čuvane mješavine
• I ugrađena pravila

Iako postoje mnoge stvari koje se mogu pokriti dalje i mnoge mogućnosti za prikaz i objašnjenje, nadamo se da ste uživali u ovom osnovnom vodiču.

• Demo
• Izvor preuzimanja