LESS CSS Tutorial Návrh Slick Menu Navigační lišta

Tento článek je součástí našeho "HTML5 / CSS3 Tutorials series" - které jsou určeny k tomu, abyste z vás učinili lepšího návrháře a / nebo vývojáře. Klikněte zde zobrazit více článků ze stejné série.

Web design a vývojový svět se opravdu rychle vyvíjí. Můžeme to vidět ve velkém množství nových věcí, které byly v komunitě (téměř) každodenně spuštěny, ať už jde o aplikace nebo nové rámce, které pomáhají zefektivnit a zefektivnit naši každodenní práci webových designérů nebo vývojářů..

Jednu, která mě zaujala od dnešního vývoje webového designu, je program LESS, programovatelný jazyk stylů, který rozšiřuje způsob psaní syntaxe CSS kombinací některých konceptů programování, jako jsou proměnné, směsi, funkce a operace..

Otevře nové možnosti v psaní syntaxe CSS. Například tím, že použijeme Mixins v CSS tak, jak to děláme v programu, můžeme nyní uložit výchozí styly a hodnoty, které lze použít v celém souboru, kdykoli je to možné. S tímto nebudeme muset psát stejné styly znovu a znovu.

Udělejme si pár cvičení s LESS, abychom získali lepší přehled o tom, co nabízí.

Návrh s LESS

V tomto tutoriálu se pokusíme navrhnout přehlednou navigační lištu menu, která je inspirována tou, která je v Apple.com. Vzhledem k tomu, že je originální produkt pouze „inspirován“, vezměte na vědomí, že náš finální produkt nebude přesně stejný jako originál.

Chcete-li začít, můžete si nejdříve přečíst následující užitečné zdroje. Vysvětlují některé základní implementace jazyka LESS, které vám budou nápomocny ještě předtím, než začnete tento návod používat.

• Méně je více: Udělej si svůj CSS kódování jednodušší s LESS
• Napište lepší CSS s méně
• Úvod do nedostatku, a srovnání s Sass

Příprava

Nejdříve jsou pro tento malý projekt důležité věci, to je:

1. LESS Text Editor

Potřebujeme textový editor pro kódování navigačního menu. Většina textových editorů dostupných na dnešním trhu (např. Dreamweaver, Notepad ++, InType, Sublime Text 2) však zatím nepodporuje .méně ve výchozím nastavení, takže syntaxe nemusí být dobře zvýrazněna.

Pro účely tohoto tutoriálu použijeme speciální textový editor pro LESS s názvem ChrunchApp. Můžeme otevřít a upravit .méně rozšíření a kompilace do statického CSS pomocí této aplikace. Vzhledem k tomu, že se jedná o aplikaci Adobe Air, lze ji nainstalovat do všech hlavních operačních systémů (Win, OSX a Linux).

Pro editor HTML můžete použít libovolný editor, který již nyní pohodlně používáte. Já osobně mám rád Sublime Text 2.

2. Less.js

Dále si stáhněte knihovnu LESS JavaScript z jejich oficiálních stránek, aktuální verze je 1.2.1. Umístěte ji do složky pro praxi.

Poté propojte soubor s dokumentem HTML.

3. Bez předpon

Využijeme také několik funkcí CSS3 k dosažení některých efektů v navigačním menu, které bude obsahovat předpony dodavatele (-moz-, -Ó-, -webkit-), aby se správně vykreslil v různých prohlížečích. Nicméně, já osobně nemám laskavost používat předpony, jak to bude bloat soubor CSS.

Z tohoto důvodu jsem se rozhodla použít prefix-free, JavaScript knihovnu vytvořenou Lea Verou, která bude automaticky zpracovávat předpony dodavatele v pozadí. Takže budeme muset napsat oficiální syntaxi z W3C.

Stáhněte soubor a připojte jej k souboru HTML.

Dobře, všichni jsme připraveni; Nyní začněme strukturovat značení HTML.

Značky HTML

Navigace je poměrně jednoduchá. Bude obsahovat pět nabídek zabalených do neuspořádané značky seznamu. Otevřete svůj oblíbený editor HTML a přidejte následující značky:

LESS Styling

V této sekci začneme styling navigace s jazykem LESS. Pro ty, kteří jsou novým jazykem programování, by se psát syntaxi CSS s LESS cítila trochu divně a trapně. Ale nebojte se, jakmile budete mít nějakou praxi, bude to jistě zábavnější než způsob, jakým píšeme čisté CSS (to je moje zkušenost, je to také trochu návyková).

Prozkoumejme styl navigace z našeho zdroje inspirace.

Jak vidíme na obrázku výše, navigace Apple.com má následujících 6 hlavních společných stylů:

• stín
• okraj
• dělič
• přechody
• efekt vznášení
• text

Tyto styly uložíme a uložíme je uvnitř config.less jako výchozí styl Konfigurace; někteří návrháři by to také mohli pojmenovat lib.css to znamená Knihovna. Propojte tento soubor s naším dokumentem.

Ujistěte se, že je umístíte před knihovnu LESS JavaScript.

Definujte barevnou základnu pomocí proměnných

V tomto kroku definujeme navigační barevnou základnu pomocí proměnných. Proměnná v LESS je deklarována pomocí @ symbol.

@theme: # 555;

Tento @téma proměnná je naše standardní barva; využijeme ho v každém možném možném provedení pro dokonalé barevné schéma a tak, aby bylo možné očekávat, že barevné složení bude konzistentnější.

Definujte výchozí styl stínů pomocí Mixins

Jednou z vlastností, kterou miluji z LESS, jsou Mixins. Jedná se o koncept programování, který ukládá několik předdefinovaných stylů, které mohou být v LESS zděděny ve třídách nebo idech později v šabloně stylů..

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

Ve výše uvedeném kódu jsem nezahrnul prefixovou verzi box-stín vlastnost, protože knihovna bez prefixu s nimi bude pracovat automaticky. Barva stínu je také zděděna z proměnné barvy motivu.

Definujte styl hranic pomocí parametrických směsí

Navigační lišta bude potřebovat výraznou barvu ohraničení s mírně zaobleným rohem. Hraniční styl můžeme zkompilovat pomocí Parametric Mixins. Ve skutečnosti má stejnou funkci jako Mixins, pouze rozdíl je v tom, že má také proměnlivé parametry, takže hodnoty jsou nastavitelnější.

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

Ve výše uvedeném kódu jsme nastavili výchozí hranici @poloměr pro 3px a jak jsme zmínili dříve, tuto hodnotu lze později změnit.

Definujte Gradient, Divider a Hover Style pomocí operace

Operace je jednoduše programovací jazyk, kde můžeme aplikovat matematický vzorec jako je přidání, dělení, odčítání a násobení, abychom získali požadovaný výsledek. Podívejme se na následující kód:

.divider border-style: pevná; border-width: 0 1px 0 1px; border-color: transparent @theme - # 111 transparent @theme + # 333; 

Ve výše uvedeném kódu odečítáme @téma proměnná podle # 111, tímto způsobem by levý okraj barevného výstupu byl o něco tmavší. Zatímco barva pravého okraje je odvozena od přidání @téma proměnná s hexadecimální barvou # 333, výstup by byl lehčí.

Úroveň barevného schématu

Pro některé z vás, kteří by mohli být zmateni vzorci, se podívejme na schéma barevného schématu níže, abychom získali lepší porozumění:

Maximální tmavý tón je # 000 (černá), zatímco maximální světelný tón je #fff (bílá) a náš současný barevný základ je # 555. Takže pokud chceme, aby byla barevná základna 3 úrovně tmavší od proudu, můžeme je jednoduše odečíst # 333. Stejným způsobem lze také použít pro zesvětlení barvy.

Dále budeme používat barvu přechodu.

.gradient pozadí: lineární gradient (horní, @ + + 252525 0%, @ + + 171717 50%, @ tem # 010101 51%, @ + + 151515 100%);  .vlivně ​​pozadí: lineární gradient (top, @ -eme-# 010101 0%, @ theme - # 121212 50%, @ theme - # 222222 51%, @ theme - # 050505 100%); 

Definujte styl textu pomocí Guard Mixins

Plánujeme mít na navigační liště dvě barvy, ne tmavé barvy a jedno světlo. Pro text používáme dva podmíněné příkazy pomocí Guard Mixins.

Za prvé, když je textu dána barva, která má světlost rovnou nebo větší než 50%, textového stínu by se měla ztmavit, v tomto případě barva # 000000.

.textcolor (@txtcolor) když (light (@txtcolor)> = 50%) color: @txtcolor; text-shadow: 1px 1px 0px # 000000; 

Poté, když je textu dána barva, která je menší než 50% textového stínu se změní na bílou.

.textcolor (@txtcolor) když (světlost (@txtcolor) 
Importování LESS
 
Vytvořme si další .méně souboru bez stylů a importovat config.less do ní:
 
@import "config.less";
 
Přidat rodinu písma
 
Aby navigační panel vypadal přitažlivěji, budeme používat novou rodinu fontů @ font-face pravidlo. Překvapivě, @ font-face pravidlo je vlastně podporováno již od IE6!
 
Tentokrát použijeme písmo Asap. Stáhněte si ji z fontu Squirrel fontu. Pak vložte následující styly do našeho nedávno vytvořeného bez stylů soubor.
 
@ font-face rodina fontů: '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') formát ('woff'), url ('fonts / Asap-Regular-webfont.ttf') format ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') formát ('svg'); font-weight: normální; styl písma: normální;  
 
Styling Body s barevnými funkcemi
 
Nyní udělíme barvu pozadí tělo (to by mělo být lehčí než barevný základ), stejně jako určení rodiny fontů a velikosti písma. K efektu můžeme přistupovat pomocí funkce Barvy:
 
Následující kód zesvětlí pozadí na 30%.
 
tělo pozadí: zesvětlit (@ theme, 30%); font-family: AsapRegular, sans-serif; velikost písma: 11pt; 
 
 
 
Styling navigace s vnořeným pravidlem
 
V LESS jsme schopni vnořit styly přímo pod jeho rodičem. Podívejme se na níže uvedený kód.
 
 nav tag, který obsahuje všechny potřebné prvky pro navigaci, bude mít následující styly.
 
nav okraj: 50px auto 0; šířka: 788px; výška: 45px; .okraj; .stín; 
 
Všimněte si, že namísto toho, abych znovu udělal spoustu pravidel CSS, jsem vložil .okraj dát styl pohraničí a .stín přidat stín. V reálných případech lze tyto sady tříd znovu použít i v jiném prvku, kdekoli je to potřeba.
 
 
 
Dále dáváme styly pro ul uvnitř nav mít nulové čalounění a okraj. Není to tak dávno, co se k tomuto stylu přiblížíme psaním něco takového:
 
nav … nav ul …
 
Na tomto přístupu není nic špatného, ​​ve skutečnosti jsem to dělal pokaždé a jsem s ním docela spokojený. Nicméně, tato metoda, mnoho CSS designer řekl, je verbosed a v některých případech, není snadno ovladatelný.
 
Nyní můžeme udělat něco takového:
 
nav okraj: 50px auto 0; šířka: 788px; výška: 45px; .okraj; .stín; ul padding: 0; marže: 0; 
 
 
 
A pak se menu zobrazí v řadě pomocí zobrazení: inline vlastnictví.
 
nav okraj: 50px auto 0; šířka: 788px; výška: 45px; .okraj; .stín; ul padding: 0; marže: 0; li zobrazit: inline; 
 
 
 
V níže uvedené syntaxi určujeme styl značky kotvy nabídky a přidáváme naše předdefinované styly, kterými jsou: .texturu, .dělič, .spád.
 
nav okraj: 50px auto 0; šířka: 788px; výška: 45px; .okraj; .stín; ul padding: 0; marže: 0; li zobrazit: inline; a text-decoration: none; displej: inline-block; plavat vlevo; šířka: 156px; výška: 45px; zarovnání textu: střed; výška řádku: 300%; .textcolor (# f2f2f2); // Tento řádek můžete změnit .divider; .spád; 
 
Ve výše uvedeném kódu aplikujeme hexadecimální barvu # f2f2f2 ve kterém lehkost je zvažována nad 50%, tak my bychom očekávali, že stín se stane tmavým (automaticky). Zbytek kódu jsem si jistý, že je zcela samozřejmý.
 
 
 
Když se však podíváme na výše uvedený výsledek, každá z menu má dělicí příčky, což vede k tomu, že poslední sekce přetéká na dno. Musíme tedy vynechat styl ohraničení pro první a poslední dítě navigačního panelu.
 
nav okraj: 50px auto 0; šířka: 788px; výška: 45px; .okraj; .stín; ul padding: 0; marže: 0; li zobrazit: inline; a text-decoration: none; displej: inline-block; plavat vlevo; šířka: 156px; výška: 45px; zarovnání textu: střed; výška řádku: 300%; .textcolor (# f2f2f2); // Tento řádek můžete změnit .divider; .spád;  li: první dítě a border-left: none;  li: last-child a border-right: žádný; 
 
 
 
Státní stát
 
Pro poslední krok přidáme efekt přechodu. V LESS můžeme dodat pseudo-element jako :vznášet se použitím & symbol.
 
nav okraj: 50px auto 0; šířka: 788px; výška: 45px; .okraj; .stín; ul padding: 0; marže: 0; li zobrazit: inline; a text-decoration: none; displej: inline-block; plavat vlevo; šířka: 156px; výška: 45px; zarovnání textu: střed; výška řádku: 300%; .textcolor (# f2f2f2); // Tento řádek můžete změnit .divider; .spád; &: hover .hovereffect;  li: první dítě border-left: none;  li: last-child a border-right: žádný; 
 
 
 
Změna barevného motivu
 
Tady je chladná část LESS. Pokud chceme změnit celkový barevný motiv, můžeme to udělat v menším počtu řádkových změn než to, co potřebujeme v čistém CSS.
 
V tomto případě změním barvu navigace tak, aby byla o něco lehčí. Stačí změnit následující dva řádky.
 
@theme: #ccc; // Změňte to
 
.textcolor (# 555); //A tohle
 
A tady je výsledek.
 
 
 
Zkompilovat LESS do CSS
 
Když stále používáme LESS JavaScript, bude to chytit .méně soubor a přeložit jej do statického CSS tak, aby ho standardní prohlížeč mohl interpretovat. Jedná se o dvojí práci na straně klienta, nemluvě o nadbytečné a plýtvající šířce pásma. Hlavní bod LESS je v pracovním postupu pro zjednodušení naší praxe při kompilaci statického CSS tak, aby byl dynamičtější a programovatelnější..
 
Když se tedy chystáme umístit navigační lištu na webovou stránku, je důležité zkompilovat soubor LESS do statického CSS.
 
Klepněte na tlačítko Crunch It! velké tlačítko.
 
 
 
Uložte soubor .less do našeho souboru cvičení, připojte jej k dokumentu HTML a zrušte propojení .méně & less.js souboru z dokumentu.
 
 .stín box-shadow: 0 1px 2px 0 # 555555;  .divider border-style: pevná; border-width: 0 1px 0 1px; hraniční barva: transparentní # 444444 transparentní # 888888;  gradient pozadí: lineární gradient (horní, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .vaereffect pozadí: lineární gradient (horní, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face rodina fontů: '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') formát ('woff'), url ('fonts / Asap-Regular-webfont.ttf') format ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') formát ('svg'); font-weight: normální; styl písma: normální;  tělo pozadí: # a2a2a2; font-family: AsapRegular, sans-serif; velikost písma: 11pt;  nav okraj: 50px auto 0; šířka: 788px; výška: 45px; hraniční rádius: 3px; ohraničení: 1px pevná # 505050; box-shadow: 0 1px 2px 0 # 555555;  nav ul padding: 0; marže: 0;  nav ul li zobrazit: inline;  nav ul li a text-decoration: none; displej: inline-block; plavat vlevo; šířka: 156px; výška: 45px; zarovnání textu: střed; výška řádku: 300%; barva: # f2f2f2; text-shadow: 1px 1px 0px # 000000; hraniční styl: pevná; border-width: 0 1px 0 1px; hraniční barva: transparentní # 444444 transparentní # 888888; pozadí: lineární gradient (horní, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: hover pozadí: lineární gradient (horní, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: first-child a border-left: none;  nav ul li: last-child a border-right: žádný;  
 
Podívejme se znovu na výsledek.
 
 
 
A jsme hotovi, neváhejte s ním experimentovat.
 
Závěr
 
Dnes jsme se naučili mnoho věcí o jazyce LESS, například:
 

• Proměnné.
• Směsi
• Parametrické směsi
• Operace
• Hlídané směsi
• A vnořená pravidla

Ačkoliv existuje mnoho věcí, které lze pokrýt dalšími a mnoha možnostmi, které lze ukázat a vysvětlit, doufáme, že jste si tento základní tutoriál užili.

• Demo
• Stáhněte si zdroj