LESS CSS Tutorial Navrhovanie navigačnej lišty Slick Menu

Tento článok je súčasťou nášho "HTML5 / CSS3 Tutoriály séria" - ktorá vám pomôže urobiť z vás lepšieho dizajnéra a / alebo vývojára. Kliknite tu zobraziť ďalšie články z rovnakej série.

Web dizajn a rozvoj sveta sa naozaj rýchlo vyvíja. Môžeme to vidieť vo veľkom počte nových vecí, ktoré boli spustené v komunite takmer každý deň, či už sú to aplikácie alebo nové rámce, ktoré nám pomáhajú zefektívniť a zefektívniť každodennú prácu ako web dizajnérov alebo vývojárov.

Jeden, ktorý mi zachytil moju pozornosť z vývoja webového dizajnu je dnes LESS, programovateľný jazyk šablón štýlov, ktorý rozširuje spôsob, akým píšeme syntax CSS kombináciou niektorých programových konceptov ako sú premenné, mixiny, funkcie a operácie.

Otvára nové možnosti pri písaní syntaxe CSS. Napríklad aplikáciou Mixins v CSS, ako to robíme v programe, teraz môžeme uložiť predvolené štýly a hodnoty, ktoré sa môžu použiť v celom súbore, kedykoľvek je to možné. Týmto nebudeme musieť písať rovnaké štýly znova a znova.

Nuž, urobte nejaké cvičenia s menej, aby ste získali lepší prehľad o tom, čo ponúka.

Navrhovanie s LESS

V tomto tutoriáli sa pokúsime navrhnúť navigačnú lištu, ktorá je inšpirovaná jedným z aplikácií Apple.com. Keďže pôvodný výrobok je len "inšpirovaný", vezmite na vedomie, že náš posledný tutorialový produkt nebude presne ten istý ako pôvodný výrobok.

Ak chcete začať, môžete si najprv prečítať nasledujúce užitočné zdroje. Vysvetľujú niektoré základné implementácie jazyka LESS, ktoré vám pomôžu predtým, než začnete kopírovať do tohto tutoriálu.

• LESS IS More: Uľahčite kódovanie CSS pomocou LESS
• Napíšte lepší CSS s menej
• Úvod do menej a porovnanie s Sass

príprava

Po prvé, existujú určité základné veci, ktoré potrebujeme pre tento malý projekt, to znamená:

1. LESS Text Editor

Na kódovanie navigačného menu budeme potrebovať textový editor. Väčšina editorov textu dostupných na dnešnom trhu (napríklad Dreamweaver, Notepad ++, InType, Sublime Text 2) zatiaľ nepodporuje .menej predvolené prípony súborov, takže syntax nemusí byť dobre zvýraznený.

Takže pre účely tohto tutoriálu budeme používať špeciálny textový editor pre LESS s názvom ChrunchApp. Môžeme otvárať a upravovať .menej rozšírenie súborov a kompiláciu do statickej CSS pomocou tejto aplikácie. Vzhľadom k tomu, že je to aplikácia Adobe Air, môže byť nainštalovaná v každom hlavnom operačnom systéme OS (Win, OSX a Linux).

Pre editor HTML môžete používať akýkoľvek editor, ktorý už teraz používate. Ja osobne mám rád Sublime Text 2.

2. Less.js

Potom stiahnite knižnicu LESS JavaScript z ich oficiálnych webových stránok, aktuálna verzia je 1.2.1. Umiestnite ho do svojho praktického priečinka.

Potom prepojte súbor s dokumentom HTML.

3. Bez predpony

Budeme tiež využívať niekoľko funkcií CSS3 na dosiahnutie niektorých efektov v navigačnom menu, ktoré budú obsahovať predpony dodávateľov (-MOZ-, -o-, -WebKit-), aby sa zobrazil správne v rôznych prehliadačoch. Samozrejme, ja osobne neuprednostňujem používanie predpôn, pretože to bude naštartovať súbor CSS.

Z tohto dôvodu som sa rozhodol použiť bezpripojovú knižnicu JavaScript vytvorenú spoločnosťou Lea Verou, ktorá bude automaticky spracovávať predpony predajcov na pozadí. Takže budeme musieť len napísať oficiálnu syntax z W3C.

Prevezmite súbor a prepojte ho so súborom HTML.

V poriadku, všetci sme pripravení; teraz začneme štruktúrovanie značky HTML.

Označenie HTML

Navigácia je dosť jednoduchá. V neoznačenej značke zoznamu bude mať päť menu. Otvorte svoj obľúbený editor HTML a vložte nasledujúcu značku:

LESS Styling

V tejto časti začneme štýl navigácie s jazykom LESS. Pre tých, ktorí sú noví v programovacom jazyku, písanie syntaxe CSS s LESS by bolo trochu divné a nepríjemné. Ale nebojte sa, akonáhle budete mať nejakú prax, určite to bude príjemnejšie ako spôsob, akým píšeme čistý CSS (to je moje skúsenosti, je to tiež trochu návyková).

Pozrime sa na štýl navigácie z nášho zdroja inšpirácie.

Ako môžeme vidieť na snímke vyššie, navigácia Apple.com má nasledujúcich 6 hlavných bežných štýlov:

• tieň
• hraničné
• delič
• prechody
• efekt vznášania
• text

Tieto štýly uložíme a uložíme ich dovnútra config.less ako predvolený štýl konfigurácia; niektorí dizajnéri by tiež mohli pomenovať lib.css to znamená knižnica. Prepojte tento súbor s týmto dokumentom.

Uistite sa, že ho umiestnite pred knižnicu LESS JavaScript.

Definujte farebnú základňu s premennými

V tomto kroku definujeme základňu navigačnej farby pomocou premenných. Premenná v LESS je deklarovaná pomocou @ symbol.

@theme: # 555;

toto @theme premenná je naša štandardná farba; budeme ho používať v každom možnom prípade, aby sme dokonalú farebnú schému a aby sme očakávali konzistentnosť farby.

Definujte predvolený tieňový štýl so zmesami

Jedna z funkcií, ktorú milujem z LESS, je Mixins. Ide o programovú koncepciu, ktorá uchováva niekoľko preddefinovaných štýlov, ktoré v LESS môžu byť zdedené v triedach alebo IDs neskôr v štýle šablón.

.tieň box-tieň: 0 1px 2px 0 @theme; 

Vo vyššie uvedenom kóde som nezahrnul predplatenú verziu súboru box-shadow Vlastnosť, pretože bezfarebná knižnica ich spracuje automaticky. Farba tieňa je tiež zdedená z premennej farby motívu.

Definujte hraničný štýl s parametrickými mixmi

Navigačná lišta bude potrebovať zreteľnú farbu ohraničenia s mierne zaobleným rohom. Môžeme kompilovať hraničný štýl pomocou Parametric Mixins. V skutočnosti má rovnakú funkčnosť ako Mixins, iba rozdiel je v tom, že má tiež meniteľné parametre, takže hodnoty sú viac nastaviteľné.

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

V uvedenom kóde sme nastavili predvolenú hranicu @polomer pre 3PX a ako sme už uviedli, túto hodnotu možno neskôr zmeniť.

Definujte gradient, oddeľovač a štýl s pohybom

Operácia je jednoducho programovací jazyk, v ktorom môžeme použiť matematický vzorec, ako je pridanie, rozdelenie, odčítanie a násobenie, aby sme získali požadovaný výsledok. Poďme sa pozrieť na nasledujúci kód:

.rozdeľovač hraničný štýl: pevný; šírka hranice: 0 1px 0 1px; okraj-farba: transparentný @ theme - # 111 transparentný @ theme + # 333; 

V tomto kóde sme odpočítali @theme premenná pomocou # 111, tak by bol ľavý okrajový farebný výstup trochu tmavší. Zatiaľ čo pravá farebná hranica je odvodená z pridania @theme premenná s hexadecnou farbou # 333, výstup by bol ľahší.

Úroveň farebnej schémy

No, pre niektorých z vás, ktorí by mohli byť zmätení s vzorcami, skúmme farebný schéma nižšie, aby sme získali lepšie pochopenie:

Maximálny tmavý tón je # 000 (čierna), zatiaľ čo maximálny svetelný tón je #fff (biela) a naša súčasná farebná základňa je # 555. Takže ak chceme, aby bola základňa farieb 3 úrovne tmavšie od prúdu, môžeme jednoducho odčítať # 333. Rovnakým spôsobom je možné použiť aj farbu.

Potom budeme ovládať gradientovú farbu.

.gradient pozadie: lineárny gradient (top, @ theme + # 252525 0%, @ theme + # 171717 50%, theme - # 010101 51%, theme + # 151515 100%);  .kontakt (pozadie: lineárny gradient (horný, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Definujte textový štýl pomocou Guard Mixins

Plánujeme mať na navigačnej lište dve farby, nie tmavú farbu a jedno svetlo. Aplikujeme dve podmienené vyhlásenia pre text pomocou Guard Mixins.

Po prvé, ak sa text uvádza farba, ktorá má svetlosť rovnajúcu sa alebo vyššiu ako 50%, text-shadow by mala byť tmavá, v tomto prípade farba # 000000.

.textcolor (@txtcolor) keď (lightness (@txtcolor)> = 50%) color: @txtcolor; text-tieň: 1px 1px 0px # 000000; 

Potom, keď je text daný farbou, že svetlosť je menej ako 50% text-shadow bude biela.

.textcolor (@txtcolor) keď (lightness (@txtcolor) 
Importovať menej
 
Teraz vytvoríme ďalší .menej súbor s názvom styles.less a importovať config.less do toho:
 
@import "config.less";
 
Pridať Font Font
 
Aby navigačná lišta bola atraktívnejšia, budeme používať novú rodinu písma @ Font-face vládnuť. prekvapivo, @ Font-face pravidlo je skutočne už podporované od IE6!
 
Tentokrát použijeme písmo Asap. Stiahnite si ho z kolekcie tváre písma Font Squirrel. Potom vložte nasledujúce štýly do našich nedávno vytvorených styles.less súbor.
 
@ písmo-tvár font-family: 'AsapRegular'; src: url ( 'fonts / ASAP-Regular-webfont.eot'); src: url ('fonts / Asap-Regular-webfont.eot? #iefix') formát (embedded-opentype), url ('fonts / Asap-Regular-webfont.woff' ('fonty / Asap-Regular-webfont.ttf') formát ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') formát ('svg'); veľkosť písma: normálna; štýl písma: normálny;  
 
Styling Body s farebnými funkciami
 
Teraz poskytneme farbu pozadia telo (ktoré by mali byť ľahšie ako základňa farieb), ako aj špecifikovať rodinu fontov a veľkosť písma. Efekt môžeme priblížiť pomocou funkcií farieb:
 
Nasledujúci kód osvetlí pozadie pri 30%.
 
telo pozadie: odľahčiť (@theme, 30%); písmo-rodina: AsapRegular, sans-serif; veľkosť písma: 11pt; 
 
 
 
Styling Navigácia s vnoreným pravidlom
 
V LESS sme schopní hniezdiť štýly priamo pod svojim rodičom. Poďme sa pozrieť na kód nižšie.
 
 nav tag, ktorý obsahuje všetky potrebné prvky pre navigáciu, bude mať tieto štýly.
 
Nav margin: 50px auto 0; šírka: 788px; výška: 45px; .border; .shadow; 
 
Všimnite si, že namiesto toho, aby som dala veľa pravidiel CSS, som vložil iba .hraničné určiť hraničný štýl a .tieň pridať tieň. V reálnych prípadoch sa tieto skupiny tried môžu opätovne použiť aj v inom prvku, kdekoľvek je to potrebné.
 
 
 
Ďalej uvádzame štýly pre ul vnútri nav mať nulové polstrovanie a okraj. Nie tak dávno sa k štýlu priblížime napísaním niečoho takto:
 
Navštívte ... nav ul ...
 
Nie je nič zlého s týmto prístupom, v skutočnosti som to robil vždy, keď som s ním veľmi spokojný. Avšak táto metóda, ktorú mnohí dizajnéri CSS uviedli, je vysvetlená a v niektorých prípadoch nie je ľahko zvládnuteľná.
 
Teraz môžeme urobiť niečo takéto:
 
Nav margin: 50px auto 0; šírka: 788px; výška: 45px; .border; .shadow; ul padding: 0; rozpätie: 0; 
 
 
 
A potom sa menu zobrazí v riadku pomocou zobrazenie: inline vlastnosť.
 
Nav margin: 50px auto 0; šírka: 788px; výška: 45px; .border; .shadow; ul padding: 0; rozpätie: 0; li zobrazenie: inline; 
 
 
 
V nižšie uvedenej syntaxe určujeme štýl štítku anchor štýlu a pridáme preddefinované štýly, ktoré sú: .textcolor, .delič, .stúpanie.
 
Nav margin: 50px auto 0; šírka: 788px; výška: 45px; .border; .shadow; ul padding: 0; rozpätie: 0; li zobrazenie: inline; a text-decoration: none; zobrazenie: inline-block; plavák: vľavo; šírka: 156px; výška: 45px; text-align: center; výška výšky: 300%; .textcolor (# f2f2f2); // Môžete zmeniť tento riadok. .gradient; 
 
V uvedenom kóde používame hexadecimálnu farbu # f2f2f2 v ktorom je ľahkosť považovaná za nad 50%, tak by sme očakávali, že stín bude tmavý (automaticky). Zvyšok kódu, ktorý som si istý, je celkom jasný.
 
 
 
Ak sa však pozrieme na aktuálny výsledok vyššie, každé menu má rozdeľovače, čo vedie k tomu, že posledná časť pretečie na spodnú časť. Takže musíme vynechať hraničný štýl pre prvé a posledné dieťa navigačného panela.
 
Nav margin: 50px auto 0; šírka: 788px; výška: 45px; .border; .shadow; ul padding: 0; rozpätie: 0; li zobrazenie: inline; a text-decoration: none; zobrazenie: inline-block; plavák: vľavo; šírka: 156px; výška: 45px; text-align: center; výška výšky: 300%; .textcolor (# f2f2f2); // Môžete zmeniť tento riadok. .gradient;  li: prvá dieťa a border-left: none;  li: posledné-dieťa a border-right: none; 
 
 
 
Stav kurzora
 
V poslednom kroku pridáme efekt vznášania. V LESS môžeme pridať pseudo-prvok ako napr :vznášať sa použitím & symbol.
 
Nav margin: 50px auto 0; šírka: 788px; výška: 45px; .border; .shadow; ul padding: 0; rozpätie: 0; li zobrazenie: inline; a text-decoration: none; zobrazenie: inline-block; plavák: vľavo; šírka: 156px; výška: 45px; text-align: center; výška výšky: 300%; .textcolor (# f2f2f2); // Môžete zmeniť tento riadok. .gradient; &: vznášať .hovereffect;  li: prvá dieťa a border-left: none;  li: posledné-dieťa a border-right: none; 
 
 
 
Zmeňte farebnú tému
 
Tu je chladná časť LESS. Ak chceme zmeniť celkovú farebnú tému, môžeme to urobiť v menšom počte riadkov, než to, čo potrebujeme v čistom CSS.
 
V tomto prípade zmením farbu navigácie tak, aby bola trochu svetlejšia. Jednoducho zmeňte nasledujúce dva riadky.
 
@theme: #ccc; Zmeňte to
 
.textcolor (# 555); //A to
 
A tu je výsledok.
 
 
 
Kompilovať menej do CSS
 
Keď ešte stále používame JavaScript NESPRÁVNE, chystáme ho .menej súbor a preložiť do statického CSS, aby ho štandardný prehliadač mohol interpretovať. Toto je dvojitá práca na strane klienta, nehovoriac o nadbytočnom a plytvaním šírkou pásma. Hlavným bodom projektu LESS je pracovný tok, ktorý zjednodušuje našu prax v zostavovaní statickej CSS, aby sme boli dynamickejší a programovateľnejší.
 
Takže, keď sa chystáme umiestniť navigačný panel na web, je dôležité zostaviť súbor LESS do statického CSS.
 
Kliknite na tlačidlo Crunch It! veľké tlačidlo.
 
 
 
Uložte súbor .less do nášho súboru cvičenia, prepojte ho s dokumentom HTML a zrušte prepojenie .menej & less.js súboru z dokumentu.
 
 .tieň box-tieň: 0 1px 2px 0 # 555555;  .divider border-style: solid; šírka hranice: 0 1px 0 1px; okraj-farba: transparentná # 444444 transparentná # 888888; . gradient pozadie: lineárny gradient (top, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .kontakt (pozadie: lineárny gradient (top, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ písmo-tvár font-family: 'AsapRegular'; src: url ('fonty / Asap-Regular-webfont.eot'); src: url ('fonts / Asap-Regular-webfont.eot? #iefix') formát (embedded-opentype), url ('fonts / Asap-Regular-webfont.woff' ('fonty / Asap-Regular-webfont.ttf') formát ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') formát ('svg'); veľkosť písma: normálna; štýl písma: normálny;  body background: # a2a2a2; písmo-rodina: AsapRegular, sans-serif; veľkosť písma: 11pt;  nav margin: 50px auto 0; šírka: 788px; výška: 45px; polomer okrajov: 3px; hranica: 1px pevná # 505050; box-tieň: 0 1px 2px 0 # 555555;  nav ul padding: 0; rozpätie: 0;  nav ul li zobrazenie: inline;  nav ul li a text-dekorácia: žiadne; zobrazenie: inline-block; plavák: vľavo; šírka: 156px; výška: 45px; text-align: center; výška výšky: 300%; farba: # f2f2f2; text-tieň: 1px 1px 0px # 000000; hraničný štýl: pevný; šírka hranice: 0 1px 0 1px; okraj-farba: transparentná # 444444 transparentná # 888888; pozadie: lineárny gradient (top, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: vznáša sa pozadie: lineárny gradient (top, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: prvé-dieťa a border-left: none;  navul li: posledné-dieťa a border-right: none;  
 
Pozrime sa na výsledok ešte raz.
 
 
 
A my sme hotoví, prosím, neváhajte experimentovať s tým.
 
záver
 
Dozvedeli sme sa veľa vecí o jazyku LESS dnes, napríklad:
 

• premenné.
• Mixins
• Parametrické zmesi
• operácie
• Strážené zmesi
• A vnorené pravidlá

Aj keď existuje veľa vecí, ktoré možno pokryť ďalšími a mnohými možnosťami, ktoré je potrebné preukázať a vysvetliť, dúfame, že sa vám tento základný tutoriál páči.

• demonštrácie
• Stiahnuť zdroj