LESS CSSi juhendamine Slick Menu navigeerimisriba kujundamine

See artikkel on osa meie "HTML5 / CSS3 juhendite seeria" - pühendatud selleks, et aidata teil paremini disainer ja / või arendaja. Kliki siia et näha sama seeria rohkem artikleid.

Veebidisain ja arengu maailm arenevad kiiresti. Me näeme seda paljudes uutes asjades, mis käivitasid kogukonnas (peaaegu) igapäevaselt, olgu siis rakendused või uued raamistikud, mis aitavad muuta meie igapäevatöö veebidisaineriks või arendajaks tõhusamaks ja tõhusamaks.

Üks, mis pälvis täna oma tähelepanu veebidisaini arendamisest, on LESS, programmeeritav stiilitabel, mis laiendab CSS-süntaksit, ühendades mõned programmeerimiskontseptsioonid nagu muutujad, segmendid, funktsioonid ja operatsioonid.

See avab uusi võimalusi CSS-i süntaksit kirjutades. Näiteks, rakendades CSS-is Mixins-i, nagu seda me teeme programmis, saame nüüd salvestada vaikimisi stiilid ja väärtused, mida saab kasutada kogu failis, kui võimalik. Sellega ei pea me uuesti ja uuesti üles kirjutama samu stiile.

Noh, teeme mõned harjutused LESSiga, et saada parem ülevaade sellest, mida ta pakub.

Projekteerimine LESS'iga

Selles juhendis püüame kujundada slick menüü navigeerimisriba, mis on inspireeritud Apple.com veebisaidilt. Arvestades, et algne toode on inspireeritud, võtke arvesse, et meie lõplik juhendaja ei ole täpselt sama, mis originaal.

Alustamiseks võite kõigepealt lugeda järgmisi kasulikke ressursse. Nad selgitavad mõningaid LESS-i keele põhilisi rakendusi, mis on teile kasulikud, enne kui lähete selle juhendi juurde.

• LESS on rohkem: muutke oma CSS-i kodeerimine lihtsamaks
• Kirjutage parema CSS-iga vähem
• Sissejuhatus väheseks ja võrdlemiseks Sassiga

Ettevalmistus

Kõigepealt on selle väikeprojekti jaoks mõned olulised asjad, mis on:

1. LESS Teksti redaktor

Navigeerimismenüü koodimiseks on meil vaja tekstiredaktorit. Kuid enamik tänapäeval turul kättesaadavaid tekstiredaktoreid (nt Dreamweaver, Notepad ++, InType, Sublime Text 2) pole veel toetanud .vähem faililaiendid vaikimisi, nii et süntaksit ei pruugi hästi esile tõsta.

Niisiis kasutame käesoleva juhendi jaoks spetsiaalset tekstiredaktorit LESSi jaoks, mille nimi on ChrunchApp. Me saame avada ja muuta .vähem failid ja kompileerige see rakendusega staatiliseks CSS-ks. Kuna tegemist on Adobe Airi rakendusega, saab seda installida igas suuremas töölaua operatsioonisüsteemis (Win, OSX ja Linux).

HTML-redaktori jaoks saate kasutada mis tahes toimetajat, mida te juba praegu kasutate. Mulle meeldib Sublime Text 2.

2. Less.js

Seejärel laadige LESS JavaScript raamatukogu oma ametlikust veebisaidilt alla, praegune versioon on 1.2.1. Asetage see oma praktika kausta sisse.

Seejärel ühendage fail HTML-dokumendiga.

3. Prefiksivaba

Me kasutame ka mõningaid CSS3 funktsioone navigatsioonimenüüs mõningate efektide saavutamiseks, mis sisaldavad tarnija eesliiteid (-moz-, -o-, -webkit-), et muuta see erinevate brauserite korral õigesti. Kuid ma isiklikult ei poolda eesliite kasutamist, kuna see õõnestab CSS-faili.

Sel põhjusel otsustasin ma kasutada prefiksivaba, JavaScript versiooni, mille on loonud Lea Verou, kes hakkab müüja eesliiteid automaatselt taustal käsitsema. Seega peame ainult kirjutama ametliku süntaksiga W3C-st.

Laadige fail alla ja ühendage see HTML-failiga.

Olgu, me kõik oleme loodud; nüüd alustame HTML-märgistuse struktureerimist.

HTML-i märgistus

Navigeerimine on üsna lihtne. Sellel on viis menüüd, mis on pakitud järjestamata nimekirjas. Avage oma lemmik HTML-redaktor ja pane järgmine märgistus:

LESS Styling

Selles peatükis alustame navigeerimise kujundamist keelega LESS. Neile, kes on programmeerimiskeelega uued, tundub, et CSS-süntaksi kirjutamine LESSiga tundub natuke imelik ja ebamugav. Kuid ärge muretsege, kui olete harjutanud, on see kindlasti nauditavam kui see, kuidas me kirjutame puhta CSS-i (see on minu kogemus, see on ka natuke sõltuvust tekitav).

Uurime navigatsioonistiili meie inspiratsiooniallikast.

Nagu näeme ülaltoodud pildil, on Apple.com-i navigatsioonil järgmised 6 peamist ühist stiili:

• vari
• piiri
• jagaja
• kalded
• hover efekt
• teksti

Me salvestame need stiilid ja salvestame need sees config.less vaikimisi stiili Konfiguratsioon; mõned disainerid võivad seda nimetada lib.css see tähendab Raamatukogu. Linkige see fail meie dokumendiga.

Veenduge, et asetate selle enne LESS JavaScripti raamatukogu.

Määrake värvialus muutujatega

Selles etapis määratleme muutujate abil navigatsioonivärvialuse. LESS-i muutuja deklareeritakse @ sümbol.

@theme: # 555;

See @theme muutuja on meie standardvärv; me kasutame seda igal võimalikul viisil täiusliku värviskeemi sundimiseks ja nii, et värvikompositsioon muutuks järjepidevamaks.

Defineerige varjundi stiil Mixins'iga

Üks LESSi armastatavaid omadusi on Mixins. See on programmeerimiskontseptsioon, mis salvestab mitu eelnevalt määratletud stiili, mida LESS-is saab pärandada klassides või ID-des hiljem stiili lehel.

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

Ülaltoodud koodis ma ei lisanud kast-vari vara, kuna prefiksivaba raamatukogu hakkab neid automaatselt käsitlema. Ka varju värv pärineb teemavärvilisest värvist.

Määratlege parameetriliste segudega piiri stiil

Navigeerimisriba vajab eraldi äärevärvi, millel on veidi ümardatud nurk. Me saame koostada piiri stiili parameetriliste segude abil. See on tegelikult sama funktsiooniga kui Mixins, ainult erinevus on see, et sellel on ka muudetavad parameetrid, nii et väärtused on reguleeritavamad.

.piir (@radius: 3px) border-radius: @radius; piir: 1px tahke @theme - # 050505; 

Ülaltoodud koodis seadistame vaikepiiri @radius jaoks 3px ja nagu me varem mainisime, saab seda väärtust hiljem muuta.

Määrake Gradient, Divider ja Hover Style koos operatsiooniga

Toimimine on lihtsalt programmeerimiskeel, mille abil saame soovitud tulemuse saamiseks kasutada matemaatilist valemit nagu lisamine, jagamine, lahutamine ja korrutamine. Vaatame järgmist koodi:

.jagaja piiri-stiil: tahke; piiri laius: 0 1px 0 1px; äärevärv: läbipaistev @theme - # 111 läbipaistev @theme + # 333; 

Ülaltoodud koodist lahutame @theme muutuja poolt # 111, sel moel oleks vasakpoolse värvi väljund natuke tumedam. Kuigi parempoolne piirvärv on saadud @theme varieeruv kuue värviga # 333, väljund oleks kergem.

Värviskeemi tase

Mõne teie jaoks, keda võidakse segi ajada valemitega, uurime allpool olevat värvilahenduste diagrammi paremaks mõistmiseks:

Maksimaalne tume toon on # 000 (must), samas kui maksimaalne valgus toon on #fff (valge) ja meie praegune värvialus on # 555. Niisiis, kui tahame, et värvibaas oleks 3 praegusest tasemest tumedamad, võime selle lihtsalt lahutada # 333. Sama võib kasutada ka värvi heledamaks muutmiseks.

Järgmisena töötame gradientvärviga.

.gradient taust: lineaarne gradient (ülemine, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 151515 100%);  .hovereffect taust: lineaarne gradient (ülemine, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Määrake tekstistiil Guard Mixinsiga

Plaanime navigeerimisribal 2 värvi, mitte tumedat värvi ja üht valgust. Me kasutame teksti jaoks kahte tingimuslikku avaldust Guard Mixins'i abil.

Esiteks, kui tekstile antakse värv, mille heledus on 50% või rohkem, siis teksti vari peaks pimedaks muutuma, sel juhul värv # 000000.

.textcolor (@txtcolor) kui (heledus (@txtcolor)> = 50%) color: @txtcolor; teksti vari: 1px 1px 0px # 000000; 

Siis, kui tekstile antakse värv, mille heledus on väiksem kui 50% teksti vari muutub valgeks.

.textcolor (@txtcolor) kui (heledus (@txtcolor) 
LESSi importimine
 
Loome nüüd teine .vähem nimega fail styles.less ja import config.less sellele:
 
@import "config.less";
 
Lisage fontide perekond
 
Selleks, et navigeerimisriba oleks atraktiivsem, lisame uue fontide perekonna @ font-face reegel. Üllatavalt, @ font-face reegel on juba IE6-st toetatud!
 
Seekord kasutame Asap-fonti. Laadige see alla Font Squirrel'i fontide kollektsioonist. Seejärel sisesta meie hiljuti loodud stiilid styles.less faili.
 
@ font-face font-family: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'); src: url ('fonts / Asap-Regular-webfont.eot? #iefix') formaat ("varjatud opentype"), url ('fonts / Asap-Regular-webfont.woff') vorming ('woff'), URL ('fonts / Asap-Regular-webfont.ttf') formaat ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') formaat ('svg'); fondi kaal: normaalne; font-style: normaalne;  
 
Keha kujundamine värvifunktsioonidega
 
Nüüd anname me taustavärvi keha (mis peaks olema värvialusest kergem) ning täpsustama fontide perekonna ja fondi suuruse. Võime läheneda efektile, kasutades värvifunktsioone:
 
Järgmine kood heledaks taustaks 30%.
 
keha taust: kergendada (@theme, 30%); font-family: AsapRegular, sans-serif; fondi suurus: 11pt; 
 
 
 
Navigeerimise kujundamine sisestatud reegliga
 
LESS-is on meil võimalik paigutada stiile otse oma vanema alla. Vaatame allpool olevat koodi.
 
The nav Sildile, mis sisaldab kõiki navigeerimiseks vajalikke elemente, antakse järgmised stiilid.
 
nav margin: 50px auto 0; laius: 788px; kõrgus: 45 px; .border; .shadow; 
 
Pange tähele, et selle asemel, et anda rea ​​CSS reegleid uuesti, sisestasin ma ainult .piiri anda stiilile ja piirile .vari varju lisamiseks. Tegelikel juhtudel saab neid klasse kasutada ka teises elemendis, olenemata sellest, kus see on vajalik.
 
 
 
Järgmisena anname ul sees nav nullist polster ja marginaal. Mitte nii kaua aega tagasi läheneme stiilile kirjutades midagi sellist:
 
nav … nav ul …
 
Sellise lähenemisviisiga ei ole midagi valesti, tegelikult tegin seda iga kord ja olen sellega rahul. Kuid see meetod, paljud CSS-i disainerid on öelnud, on nihutatud ja mõnel juhul kergesti juhitav.
 
Nüüd saame teha midagi sellist:
 
nav margin: 50px auto 0; laius: 788px; kõrgus: 45 px; .border; .shadow; ul polster: 0; varu: 0; 
 
 
 
Ja siis kuvatakse menüü rida kasutades kuva: inline vara.
 
nav margin: 50px auto 0; laius: 788px; kõrgus: 45 px; .border; .shadow; ul polster: 0; varu: 0; li kuva: inline; 
 
 
 
Alltoodud süntaksis määratleme menüü ankrumärgi stiili ja lisame eelnevalt määratud stiilid, mis on: .teksti värv, .jagaja, .gradient.
 
nav margin: 50px auto 0; laius: 788px; kõrgus: 45 px; .border; .shadow; ul polster: 0; varu: 0; li kuva: inline; a text-decoration: no; kuva: inline-block; float: vasakule; laius: 156px; kõrgus: 45 px; teksti joondamine: keskus; joone kõrgus: 300%; .textcolor (# f2f2f2); // Seda rida saab muuta. .gradient; 
 
Ülaltoodud koodis rakendame kuusnurka # f2f2f2 kus kergust peetakse üle 50%, siis ootame, et vari muutub pimedaks (automaatselt). Ülejäänud kood, mis ma olen kindel, on täiesti iseenesestmõistetav.
 
 
 
Kui aga vaatame ülaltoodud tulemust, siis on iga menüü jaotur, mille tulemuseks on viimane sektsioon, mis on üle põhja. Seega peame navigeerimisriba esimese ja viimase lapse piiri stiili välja jätma.
 
nav margin: 50px auto 0; laius: 788px; kõrgus: 45 px; .border; .shadow; ul polster: 0; varu: 0; li kuva: inline; a text-decoration: no; kuva: inline-block; float: vasakule; laius: 156px; kõrgus: 45 px; teksti joondamine: keskus; joone kõrgus: 300%; .textcolor (# f2f2f2); // Seda rida saab muuta. .gradient;  li: esimene laps a left-left: no;  li: viimane laps piiri-õigus: pole; 
 
 
 
Hover riik
 
Viimase sammuna lisame hover-efekti. LESSis saab lisada pseudoelement nagu näiteks :hõljuma kasutades & sümbol.
 
nav margin: 50px auto 0; laius: 788px; kõrgus: 45 px; .border; .shadow; ul polster: 0; varu: 0; li kuva: inline; a text-decoration: no; kuva: inline-block; float: vasakule; laius: 156px; kõrgus: 45 px; teksti joondamine: keskus; joone kõrgus: 300%; .textcolor (# f2f2f2); // Seda rida saab muuta. .gradient; &: hover .hovereffect;  li: esimene laps a left-left: no;  li: viimane laps piiri-õigus: pole; 
 
 
 
Muutke värviteemat
 
Siin on LESSi jahe osa. Kui me tahame muuta üldist värvi teemat, saame seda teha vähemate muudatustega kui puhtal CSS-il.
 
Sellisel juhul muudan navigatsioonivärvi natuke kergemaks. Muutke lihtsalt kaks järgmist rida.
 
@theme: #ccc; // Muutke seda
 
.textcolor (# 555); //Ja see
 
Ja siin on tulemus.
 
 
 
Koosta LESS CSS-sse
 
Kui me ikka veel kasutame LESS JavaScriptit, haarab see selle .vähem faili ja tõlkida see staatiliseks CSS-ks nii, et standardne brauser saaks seda tõlgendada. See on kliendipoolne kahekordne töö, rääkimata üleliigne ja raiskab ribalaiust. LESSi peamine punkt on tööprotsessis, et lihtsustada meie tava staatiliste CSS-ide koostamisel, et see oleks dünaamilisem ja programmeeritav.
 
Seega, kui me kavatseme navigeerimisriba veebisaidil elada, on oluline koostada LESS-fail staatiliseks CSS-ks.
 
Klõpsake nuppu Crunch It! suur nupp.
 
 
 
Salvestage .less meie treeningfailis, linkige see HTML-dokumendiga ja ühendage ühendus .vähem & less.js failist.
 
 .shadow box-shadow: 0 1px 2px 0 # 555555;  .divider border-style: tahke; piiri laius: 0 1px 0 1px; piirivärv: läbipaistev # 444444 läbipaistev # 888888;  .gradient taust: lineaarne gradient (ülemine, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect background: lineaarne gradient (ülemine, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'); src: url ('fonts / Asap-Regular-webfont.eot? #iefix') formaat ("varjatud opentype"), url ('fonts / Asap-Regular-webfont.woff') vorming ('woff'), URL ('fonts / Asap-Regular-webfont.ttf') formaat ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') formaat ('svg'); fondi kaal: normaalne; font-style: normaalne;  keha taust: # a2a2a2; font-family: AsapRegular, sans-serif; fondi suurus: 11pt;  nav margin: 50px auto 0; laius: 788px; kõrgus: 45 px; raadius: 3x; piir: 1px tahke # 505050; kast-vari: 0 1px 2tk 0 # 555555;  nav ul padding: 0; varu: 0;  nav ul li kuva: inline;  nav ul li a text-decoration: mitte; kuva: inline-block; float: vasakule; laius: 156px; kõrgus: 45 px; teksti joondamine: keskus; joone kõrgus: 300%; värv: # f2f2f2; teksti vari: 1px 1px 0px # 000000; piiri-stiil: tahke; piiri laius: 0 1px 0 1px; piirivärv: läbipaistev # 444444 läbipaistev # 888888; taust: lineaarne gradient (ülemine, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: hover taust: lineaarne gradient (ülemine, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: esimene laps a border-left: no;  nav ul li: viimane laps a piiri-õigus: pole;  
 
Vaatame uuesti tulemust.
 
 
 
Ja me oleme valmis, proovige sellega eksperimenteerida.
 
Järeldus
 
Oleme täna LESS keele kohta palju õppinud, näiteks:
 

• Muutujad.
• Segud
• Parameetrilised segud
• Toimingud
• Valvega segud
• Ja sisestatud reeglid

Kuigi on palju asju, mida on võimalik täiendavalt käsitleda ja palju võimalusi näidata ja selgitada, loodame, et teile meeldis see põhikoolitus.

• Demo
• Allalaadimise allikas