LESS CSS Tutorial Proiectarea unei meniuri cu bară Navigare bară

Acest articol este parte a noastră "Seria Tutoriale HTML5 / CSS3" - dedicat pentru a vă ajuta să vă faceți un designer mai bun și / sau un dezvoltator. Click aici pentru a vedea mai multe articole din aceeași serie.

Web designul și dezvoltarea lumii evoluează într-adevăr rapid. Putem vedea acest lucru în numărul mare de lucruri noi lansate în comunitate (aproape) de zi cu zi, fie că este vorba de aplicații sau de noi cadre care ajută la eficientizarea și eficiența activității de zi cu zi ca designeri web sau dezvoltatori.

Unul care mi-a atras atenția de la evoluția designului web de astăzi este LESS, o limbă programabilă de stil care extinde modul în care scriem sintaxa CSS combinând câteva concepte de programare precum Variables, Mixins, Functions and Operations.

Se deschide noi capacități în scrierea sintaxei CSS. De exemplu, aplicând Mixins în CSS, așa cum facem într-un program, putem acum să stocăm stiluri implicite și valori care pot fi aplicate în întregul fișier ori de câte ori este posibil. Cu aceasta, nu va trebui să scriem aceleași stiluri mereu.

Ei bine, hai să facem câteva exerciții cu LESS pentru a obține o mai bună înțelegere a ceea ce are de oferit.

Proiectarea cu LESS

În acest tutorial vom încerca să proiectăm o bară de navigare cu meniuri care să fie inspirată de cea din Apple.com. Deoarece este doar "inspirat" de produsul original, rețineți că produsul nostru final de tutorial nu va fi exact la fel ca originalul.

Pentru a începe, este recomandat să citiți mai întâi următoarele resurse utile. Acestea explică câteva implementări de bază ale limbajului LESS, care vă vor fi de folos înainte de a vă alătura mai mult în acest tutorial.

• Mai putin este mai mult: face codificarea CSS mai usoara cu mai putin
• Scrie mai bine CSS cu mai puțin
• O introducere la mai puțin, și o comparație cu Sass

preparare

În primul rând, există câteva lucruri esențiale de care avem nevoie pentru acest mic proiect, și anume:

1. LESS Text Editor

Vom avea nevoie de un editor de text pentru a codifica meniul de navigare. Cu toate acestea, majoritatea editorilor de text disponibili pe piață astăzi (cum ar fi Dreamweaver, Notepad ++, InType, Sublime Text 2) nu au suportat încă .Mai puțin extensii de fișiere în mod prestabilit, astfel încât sintaxa să nu fie bine evidențiată.

Deci, în scopul acestui tutorial, vom folosi un editor de text special pentru LESS numit ChrunchApp. Putem deschide și edita .Mai puțin extindeți fișierele și compilați-l în CSS static utilizând această aplicație. Deoarece este o aplicație Adobe Air, poate fi instalată în orice sistem de operare major (OS Win și OSX).

Pentru editorul HTML puteți utiliza orice editor care vă este deja confortabil folosind acum. Eu personal ca Sublime Text 2.

2. Less.js

Apoi, descărcați Biblioteca LESS JavaScript de pe site-ul oficial al acestora, versiunea curentă este 1.2.1. Puneți-l în dosarul dvs. de practică pentru aceasta.

Apoi, conectați fișierul la documentul HTML.

3. Prefix-free

De asemenea, vom folosi câteva funcții CSS3 pentru a realiza anumite efecte în meniul de navigare care va include prefixele furnizorilor (-Moz-, -o-, -WebKit-) pentru ca acesta să se difuzeze corect în diferite browsere. Cu toate acestea, personal nu prefer să folosesc prefixele, deoarece acestea vor umfla fișierul CSS.

Din acest motiv, am decis să folosesc o bibliotecă JavaScript fără prefix, creată de Lea Verou, care va gestiona automat prefixele furnizorilor în fundal. Deci, va trebui doar să scriem sintaxa oficială din W3C.

Descărcați fișierul și conectați-l la fișierul HTML.

Bine, toți suntem pregătiți; acum să începem structurarea marcajului HTML.

Marcaj HTML

Navigarea este destul de simplă. Acesta va avea cinci meniuri înfășurate într-o etichetă de listă neordonată. Deschideți editorul HTML preferat și puneți următoarea marcare:

Mai puțin stil

În această secțiune vom începe să stilizăm navigația cu LESS. Pentru cei care sunt noi în limbajul de programare, scrierea sintaxei CSS cu LESS se va simți puțin ciudată și ciudată. Dar nu vă faceți griji, odată ce aveți o practică, va fi cu siguranță mai plăcută decât modul în care vom scrie CSS pur (experiența mea, este, de asemenea, un pic de dependență).

Să examinăm stilul de navigație de la sursa noastră de inspirație.

După cum vedem în captura de ecran de mai sus, navigarea Apple.com are următoarele șase principii comune principale:

• umbră
• frontieră
• compas
• gradienți
• hover efect
• text

Vom păstra aceste stiluri și le vom salva înăuntru config.less ca stil implicit Configurare; unii designeri ar putea de asemenea să o numească lib.css care înseamnă Bibliotecă. Conectați acest fișier la documentul nostru.

Asigurați-vă că plasați-o înaintea bibliotecii LESS JavaScript.

Definiți baza de culori cu variabile

În acest pas vom defini baza de culoare pentru navigație utilizând Variabile. Variabila din LESS este declarată folosind @ simbol.

@theme: # 555;

Acest @temă variabilă este culoarea noastră standard; noi vom folosi în orice mod posibil coaja perfectă a culorilor și astfel încât compoziția culorii ar trebui să devină mai consistentă.

Definiți stilul Shadow implicit cu Mixins

Una dintre caracteristicile pe care le iubesc de la LESS este Mixins. Acesta este un concept de programare care stochează mai multe stiluri predefinite care, din LESS, pot fi moștenite în clase sau ID-uri mai târziu în foaia de stil.

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

În codul de mai sus nu am inclus versiunea prefixată a box-shadow proprietate, deoarece biblioteca fără prefix se va ocupa automat de acestea. De asemenea, culoarea umbrei este moștenită de la culoarea variabilă a temei.

Definiți stilul de frontieră cu amestecurile parametrice

Bara de navigare va avea nevoie de o culoare distinctă a marginii cu un colț ușor rotunjit. Putem compila stilul de frontieră folosind parametrizarea amestecurilor. De fapt, are aceeași funcționalitate ca Mixins, doar diferența este că are și parametri variabili, astfel încât valorile sunt mai ajustabile.

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

În codul de mai sus, am creat frontiera implicită @rază pentru 3px și așa cum am menționat mai înainte, această valoare poate fi modificată mai târziu.

Definirea gradientului, a divizorului și a stilului de mutare cu funcționarea

Funcționarea este pur și simplu o limbă de programare în care putem aplica formula matematică cum ar fi Adăugarea, Divizarea, scăderea și înmulțirea pentru a obține un rezultat dorit. Să aruncăm o privire la următorul cod:

.divider stil de frontieră: solid; lățimea graniței: 0 1px 0 1px; culoarea frontală: transparența @ tema - # 111 tema transparentă + # 333; 

În codul de mai sus scădem @temă variabilă prin # 111, în acest fel, ieșirea de culori din stânga a colțurilor ar fi un pic mai întunecată. În timp ce culoarea din dreapta a marginii derivă din adăugarea @temă variabilă cu culoare hexagonală # 333, producția ar fi mai ușoară.

Nivelul nivelului culorii

Ei bine, pentru unii dintre voi care ar putea fi confundați cu formulele, să examinăm schema de culori de mai jos pentru a obține o mai bună înțelegere:

Tonul întunecat maxim este # 000 (negru), în timp ce tonul luminos este maxim #fff (alb) și baza noastră de culoare actuală este # 555. Deci, dacă vrem ca baza de culori să fie 3 niveluri mai întunecate de curent, îl putem scăpa pur și simplu # 333. Același mod poate fi aplicat și pentru a ușura culoarea.

Apoi vom folosi culoarea gradientului.

.gradient fundal: gradient liniar (top, thethe + # 252525 0%, thetheme + # 171717 50%, thetheme - # 010101 51%, thetheme + # 151515 100%);  .vocativ fundal: gradient linear (top, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Definiți stilul de text cu Mixins de gardă

Planificăm să avem 2 culori pe bara de navigație, ne culoare închisă și o lumină. Aplicăm două instrucțiuni condiționate pentru text folosind Guard Mixins.

În primul rând, atunci când textul are o culoare care are o luminozitate egală cu sau mai mare de 50%, text-shadow ar trebui să devină întunecată, în acest caz culoare # 000000.

.textcolor (@txtcolor) atunci când (lightness (@txtcolor)> = 50%) culoare: @txtcolor; text-shadow: 1px 1px 0px # 000000; 

Apoi, atunci când textul este dat o culoare că lumina este mai mică de 50% text-shadow va deveni alb.

.textcolor (@txtcolor) atunci când (lightness (@txtcolor) 
Importați mai puțin
 
Să mai creăm un altul .Mai puțin fișier numit styles.less și import config.less în el:
 
@import "config.less";
 
Adăugați familia de fonturi
 
Pentru ca bara de navigare să arate mai atrăgătoare, vom include o nouă familie de fonturi folosind @ Font-face regulă. surprinzător, @ Font-face regula este susținută deja de la IE6!
 
De data aceasta vom folosi fontul Asap. Descărcați-l din colecția de fonturi a fontului Font Squirrel. Apoi introduceți următoarele stiluri la cele create recent styles.less fişier.
 
@ font-face font-family: 'AsapRegular'; src: url ( 'fonturi / ASAP-Regular-webfont.eot'); src: url ('fonts / Asap-Regular-webfont.eot? #iefix') format (embedded-opentype), url ('fonts / Asap-Regular-webfont.woff' ('fonts / Asap-Regular-webfont.ttf') format ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') format ('svg'); font-weight: normal; font-style: normal;  
 
Modelarea corpului cu funcții de culoare
 
Acum, vom da o culoare de fundal pentru corp (care ar trebui să fie mai ușoară decât baza de culoare), precum și specificarea familiei de caractere și dimensiunea fontului. Putem aborda efectul folosind funcțiile Color:
 
Următorul cod va lumina fundalul la 30%.
 
corp fundal: lighten (@theme, 30%); font-familie: AsapRegular, sans-serif; font-size: 11pt; 
 
 
 
Modelarea navigației cu regulă nestinsă
 
În LESS, suntem capabili să cuibim stiluri direct sub părintele său. Să aruncăm o privire la codul de mai jos.
 
 nav eticheta care conține toate elementele necesare pentru navigare va primi următoarele stiluri.
 
nav margine: 50px auto 0; lățime: 788px; înălțime: 45px; .frontieră; .umbră; 
 
Observați că, în loc să dau din nou o mulțime de reguli CSS, am inserat doar .frontieră pentru a da stilul de frontieră și .umbră pentru a adăuga umbra. În cazuri reale, aceste seturi de clase pot fi refolosite și într-un alt element, ori de câte ori este necesar.
 
 
 
Apoi, oferim stiluri pentru ul în interiorul nav pentru a avea zero padding și marja. Nu cu mult timp în urmă, vom aborda stilul scriind ceva de genul:
 
nav ... nav ul ...
 
Nu este nimic în neregulă cu această abordare, de fapt, am obișnuit să o fac de fiecare dată și sunt destul de confortabil cu ea. Cu toate acestea, această metodă, a spus mulți designeri CSS, este verbosed și, în unele cazuri, nu este ușor de gestionat.
 
Acum, putem face ceva de genul:
 
nav margine: 50px auto 0; lățime: 788px; înălțime: 45px; .frontieră; .umbră; ul padding: 0; marja: 0; 
 
 
 
Apoi, meniul va fi afișat într-un rând utilizând afișare: inline proprietate.
 
nav margine: 50px auto 0; lățime: 788px; înălțime: 45px; .frontieră; .umbră; ul padding: 0; marja: 0; li afișare: inline; 
 
 
 
În sintaxa de mai jos specificăm stilul etichetei de ancorare a meniului și adăugăm stilurile predefinite, acestea fiind: .culoarea textului, .compas, .gradient.
 
nav margine: 50px auto 0; lățime: 788px; înălțime: 45px; .frontieră; .umbră; ul padding: 0; marja: 0; li afișare: inline; a text-decoration: none; afișare: inline-block; plutește la stânga; lățime: 156px; înălțime: 45px; text-align: centru; înălțimea liniei: 300%; .textcolor (# f2f2f2); // Puteți schimba această linie. .gradient; 
 
În codul de mai sus se aplică culoarea hexagonală # f2f2f2 în care ușurința este considerată mai sus de 50%, așa că ne-am aștepta să vedem umbra să devină întunecată (automat). Restul codului pe care sunt sigur că este destul de explicativ.
 
 
 
Cu toate acestea, dacă ne uităm la rezultatul curent de mai sus, fiecare dintre meniuri are divizoare, rezultând astfel că ultima secțiune se revarsă în partea de jos. Deci, trebuie să omitem stilul de frontieră pentru primul și ultimul copil al barei de navigare.
 
nav margine: 50px auto 0; lățime: 788px; înălțime: 45px; .frontieră; .umbră; ul padding: 0; marja: 0; li afișare: inline; a text-decoration: none; afișare: inline-block; plutește la stânga; lățime: 156px; înălțime: 45px; text-align: centru; înălțimea liniei: 300%; .textcolor (# f2f2f2); // Puteți schimba această linie. .gradient;  li: primul-copil a frontieră-stânga: nici unul;  li: ultim-copil a border-right: none; 
 
 
 
Poziționați statul
 
Pentru ultimul pas vom adăuga efectul de hovering. În mai puțin putem adăuga pseudo-element de precum :planare utilizând & simbol.
 
nav margine: 50px auto 0; lățime: 788px; înălțime: 45px; .frontieră; .umbră; ul padding: 0; marja: 0; li afișare: inline; a text-decoration: none; afișare: inline-block; plutește la stânga; lățime: 156px; înălțime: 45px; text-align: centru; înălțimea liniei: 300%; .textcolor (# f2f2f2); // Puteți schimba această linie. .gradient; &: mutați .hovereffect;  li: primul-copil a border-left: nici unul;  li: ultim-copil a border-right: none; 
 
 
 
Modificați tema culorii
 
Aici este partea rece a LESS. Dacă vrem să schimbăm tema globală a culorilor, o putem face în mai puține modificări de linie decât ceea ce avem nevoie în CSS pur.
 
În acest caz, voi schimba culoarea de navigație pentru a fi puțin mai ușoară. Schimbați pur și simplu următoarele două linii.
 
@theme: #ccc; //Schimba asta
 
.textcolor (# 555); //Și asta
 
Iată rezultatul.
 
 
 
Compilați mai puțin în CSS
 
Când încă mai folosim JavaScript mai slab, acesta va apuca .Mai puțin fișier și traduceți-l în CSS static, astfel încât browserul standard să îl poată interpreta. Aceasta este o activitate dublă în partea clientului, să nu mai vorbim de redundanță și deșeuri de lățime de bandă. Punctul principal al LESS este în fluxul de lucru pentru a simplifica practica noastră în compilarea CSS statice pentru a fi mai dinamică și programabilă.
 
Deci, atunci când suntem pe punctul de a pune bara de navigare live pe un site web, este important să compilați fișierul LESS în CSS static.
 
Apasă pe Cruntați-o! butonul mare.
 
 
 
Salvați fișierul excesiv în fișierul nostru de exerciții, conectați-l la documentul HTML și deconectați-l .Mai puțin & less.js fișier din document.
 
 .umbra box-shadow: 0 1px 2px 0 # 555555;  .divider stil de frontieră: solid; lățimea graniței: 0 1px 0 1px; frontieră-culoare: transparent # 444444 transparent # 888888;  gradient fundal: gradient liniar (top, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .vocativ fundal: gradient liniar (top, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('fonturi / Asap-Regular-webfont.eot'); src: url ('fonts / Asap-Regular-webfont.eot? #iefix') format (embedded-opentype), url ('fonts / Asap-Regular-webfont.woff' ('fonts / Asap-Regular-webfont.ttf') format ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') format ('svg'); font-weight: normal; font-style: normal;  corp fundal: # a2a2a2; font-familie: AsapRegular, sans-serif; font-size: 11pt;  nav margine: 50px auto 0; lățime: 788px; înălțime: 45px; raza de graniță: 3px; frontieră: 1px solid # 505050; box-shadow: 0 1px 2px 0 # 555555;  nav ul padding: 0; marja: 0;  nav ul li afișare: inline;  nav ul li a text-decorare: nimic; afișare: inline-block; plutește la stânga; lățime: 156px; înălțime: 45px; text-align: centru; înălțimea liniei: 300%; culoare: # f2f2f2; text-shadow: 1px 1px 0px # 000000; stilul frontal: solid; lățimea graniței: 0 1px 0 1px; frontieră-culoare: transparent # 444444 transparent # 888888; fundal: gradient liniar (top, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li: hover fundal: gradient liniar (top, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: primul-copil a frontieră-stânga: nici unul;  nav ul li: ultimul-copil a border-right: none;  
 
Să aruncăm o privire la rezultatul din nou.
 
 
 
Și am terminat, vă rugăm să vă simțiți liberi să experimentați cu ea.
 
Concluzie
 
Am învățat astăzi multe lucruri despre LESS limba, cum ar fi:
 

• variabile.
• Mixins
• Amestecuri parametrice
• Operațiuni
• Amestecurile pazite
• Și regulile născute

Deși există multe lucruri care pot fi acoperite în continuare și multe posibilități pentru a fi prezentate și explicate, sperăm că vă bucurați de acest tutorial de bază.

• Demo
• Descărcați sursa