LESS CSS bemutató A Slick Menu navigációs sáv tervezése

Ez a cikk a mi része "HTML5 / CSS3 oktatóanyagok sorozat" - szentelt, hogy segítsen neked egy jobb tervező és / vagy fejlesztő. Kattints ide több cikket láthat ugyanazon sorozatból.

A web design és a fejlesztés világa gyorsan fejlődik. Ezt láthatjuk a közösségben elindított újdonságok nagy számában (majdnem) mindennap, legyen szó az Alkalmazásokról vagy az új keretrendszerekről, amelyek segítenek a mindennapi munkát webes tervezőknek vagy fejlesztőknek hatékonyabbá és hatékonyabbá tenni.

Az egyik, ami ma a web design-fejlesztésből figyelt, a LESS, egy programozható stíluslap nyelv, amely kiterjeszti a CSS-szintaxis írását, egyes programozási koncepciók, például változók, mixinek, funkciók és műveletek kombinálásával.

Új képességeket nyit meg a CSS-szintaxis írásakor. Például, ha a Mixins-t CSS-ben alkalmazzuk, mint ahogyan egy programban csinálunk, akkor alapértelmezett stílusokat és értékeket tárolhatunk, amelyek lehetségesek a teljes fájlban. Ezzel nem kell ugyanazokat a stílusokat újra és újra írni.

Nos, tegyünk néhány gyakorlatot a LESS-el, hogy jobban megismerjék, mit kínálnak.

Tervezés LESS-el

Ebben a bemutatóban megpróbálunk megtervezni egy olyan slick menü navigációs sávot, amely az Apple.com-ból készült inspirációból származik. Mivel az eredeti termék csak „ihletett”, vegye figyelembe, hogy a végső bemutató termékünk nem lesz pontosan ugyanaz, mint az eredeti.

Első lépésekhez először érdemes elolvasni az alábbi hasznos forrásokat. Megmagyarázzák a LESS nyelv néhány alapvető implementációját, amelyek hasznosak lesznek, mielőtt tovább folytatná a bemutatót.

• LESS is More: A CSS kódolás megkönnyítése a LESS-el
• Jobb CSS-t írjunk kevesebbet
• Bevezetés a SESS-be és összehasonlítással Sass-hoz

Készítmény

Először is, van néhány alapvető dolog, amire szükségünk van a kis projekthez, azaz:

1. LESS szövegszerkesztő

Szükségünk lesz egy szövegszerkesztőre a navigációs menü kódolásához. Azonban a piacon jelenleg elérhető szövegszerkesztők többsége (például a Dreamweaver, a Notepad ++, az InType, a Sublime Text 2) még nem támogatott .Kevésbé alapértelmezés szerint fájl kiterjesztések, így a szintaxist nem lehet jól kiemelni.

Tehát ennek a bemutatónak a céljára speciális szövegszerkesztőt fogunk használni a LESS nevű ChrunchApp nevű szövegszerkesztő számára. Nyithatunk és szerkeszthetünk .Kevésbé kiterjesztési fájlokat, és ezt az alkalmazást használva statikus CSS-re fordítja. Mivel ez egy Adobe Air alkalmazás, telepíthető minden nagyobb asztali operációs rendszerre (Win, OSX és Linux).

A HTML-szerkesztő számára bármely olyan szerkesztőt használhat, amelyet most már jól használ. Én személy szerint szeretem a Sublime Text 2-t.

2. Less.js

Ezután töltse le a LESS JavaScript könyvtárat hivatalos honlapjáról, a jelenlegi verzió 1.2.1. Helyezze el ezt a gyakorlati mappába.

Ezután kapcsolja össze a fájlt a HTML dokumentummal.

3. Előtagmentes

Néhány CSS3 funkciót is használunk a navigációs menü bizonyos hatásainak eléréséhez, amely tartalmazza a szállító előtagjait (-Moz-, -o-, -webKit-), hogy helyesen jelenjen meg a különböző böngészőkben. Én azonban személy szerint nem támogatom az előtagok használatát, mivel a CSS fájlt megduzzasztja.

Ezért úgy döntöttem, hogy az előtag-mentes, a Lea Verou által létrehozott JavaScript-könyvtárat használom, amely automatikusan kezelni fogja a szállító előtagjait a háttérben. Tehát csak a W3C hivatalos szintaxisát kell írni.

Töltse le a fájlt, és csatlakoztassa a HTML-fájlhoz.

Rendben, mindannyian felállítottak; Most kezdjük strukturálni a HTML jelölést.

HTML jelölés

A navigáció nagyon egyszerű. Öt menüje lesz egy nem rendezett lista címkéjében. Nyissa meg kedvenc HTML-szerkesztőjét, és tegye a következő jelölést:

LESS Styling

Ebben a fejezetben a navigációt LESS nyelvvel kezdjük. Azok számára, akik újdonságok a programozáshoz hasonló nyelvre, a CSS szintaxisának írása LESS-el egy kicsit furcsa és kínos. De ne aggódj, ha már van néhány gyakorlatod, akkor biztosan élvezetesebb lesz, mint a tiszta CSS-t írom (ez az én tapasztalatom, ez egy kicsit addiktív is).

Vizsgáljuk meg a navigációs stílust az inspiráció forrásából.

Amint az a fenti képen látható, az Apple.com navigációnak a következő 6 fő közös stílusa van:

• árnyék
• határ
• osztó
• színátmenetek
• hover hatást
• szöveg

Ezeket a stílusokat tároljuk, és megmentjük config.less az alapértelmezett stílus Configuration; egyes tervezők is megnevezhetik lib.css ami azt jelenti Könyvtár. Kapcsolja össze ezt a fájlt a dokumentumunkkal.

Győződjön meg róla, hogy a LESS JavaScript könyvtár előtt helyezi el.

A színalap meghatározása változókkal

Ebben a lépésben a változók segítségével határozzuk meg a navigációs színbázist. A LESS változóját a @ szimbólum.

@theme: # 555;

Ez @téma változó a standard színünk; mindenféle módon felhasználjuk a tökéletes színsémát, és így a színösszetétel következetesebbé válik.

Határozza meg az alapértelmezett árnyékstílust a Mixins segítségével

A LESS egyik legkedveltebb tulajdonsága a Mixins. Ez egy olyan programozási koncepció, amely több előre definiált stílust tárol, amelyeket a LESS-ben később a stíluslapon osztályokban vagy azonosítókban lehet örökölni.

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

A fenti kódban nem szerepeltem a box-shadow tulajdonság, mivel az előtag-mentes könyvtár automatikusan kezelni fogja azokat. Továbbá az árnyék színe a téma változó színéből származik.

Határozza meg a szegélystílust a paraméteres keverékekkel

A navigációs sávnak külön szegéllyel kell rendelkeznie, enyhén lekerekített sarokkal. A határstílust a Paraméteres keverékek segítségével állíthatjuk össze. Valójában ugyanolyan funkcionalitással rendelkezik, mint a Mixins, csak a különbség, hogy változtatható paraméterekkel is rendelkezik, így az értékek állíthatóbbak.

.határ (@radius: 3px) border-radius: @radius; határ: 1px szilárd @theme - # 050505; 

A fenti kódban az alapértelmezett szegélyt állítottuk be @sugár mert 3px és amint azt korábban említettük, ez az érték később módosítható.

Határozza meg a színátmenetet, az osztót és a hoverstílust a művelettel

A művelet egyszerűen egy olyan programozási nyelv, ahol a kívánt eredmény eléréséhez matematikai képletet alkalmazhatunk, mint például a Hozzáadás, Osztályozás, Kivonás és Szorzás. Nézzük meg a következő kódot:

.elválasztó határ-stílus: szilárd; határszélesség: 0 1px 0 1px; határszín: átlátszó @theme - # 111 átlátszó @theme + # 333; 

A fenti kódon kivonjuk @téma változó által # 111, így a bal oldali szegély színkimenete kicsit sötétebb lesz. Míg a jobb oldali szegély színe a hozzáadásból származik @téma változó hex színnel # 333, a kimenet könnyebb lenne.

Színséma szint

Nos, néhányan közülük, akiket összetéveszthetnek a képletekkel, vizsgáljuk meg az alábbi színséma-diagramot, hogy jobban megértsük:

A maximális sötét tónus # 000 (fekete), míg a maximális fénytónus #fff (fehér) és a jelenlegi színalapunk # 555. Tehát, ha azt szeretnénk, hogy a színalap legyen 3 szintek sötétebbek, egyszerűen levonhatjuk # 333. Ugyanígy alkalmazható a szín világosítása is.

Ezután a színátmenet színét fogjuk használni.

.gradiens háttér: lineáris gradiens (felső, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 151515 100%);  .hovereffect háttér: lineáris gradiens (felső, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Határozza meg a szövegstílust a Guard Mixins segítségével

A navigációs sávon 2 színt tervezünk, ne sötét színűt és egy fényt. Két feltételes kijelentést alkalmazunk a szöveghez a Guard Mixins segítségével.

Először is, ha a szöveg színe 50% vagy annál nagyobb, a text-shadow sötétnek kell lennie, ebben az esetben színe # 000000.

.textcolor (@txtcolor), amikor (fényesség (@txtcolor)> = 50%) color: @txtcolor; szöveg-árnyék: 1px 1px 0px # 000000; 

Ezután, amikor a szöveg színt kap, hogy a könnyedség kevesebb, mint 50% text-shadow fehér lesz.

.textcolor (@txtcolor) amikor (könnyűség (@txtcolor) 
LESS importálása
 
Most hozzunk létre egy újat .Kevésbé nevű fájl styles.less és import config.less bele:
 
@import "config.less";
 
Betűtípuscsalád hozzáadása
 
Annak érdekében, hogy a navigációs sáv vonzóbb legyen, új betűtípuscsaládot használunk @ Font-face szabály. Meglepően, @ Font-face a szabályt már az IE6 óta támogatták!
 
Ezúttal az Asap betűtípust fogjuk használni. Töltse le a Font Squirrel betűtípus-gyűjteményéből. Ezután illessze be a következő stílusokat a nemrég létrehozott programba styles.less fájl.
 
@ font-face font-family: 'AsapRegular'; src: url ( 'fonts / Asap-Regular-webfont.eot'); src: url ('fonts / Asap-Regular-webfont.eot? #iefix') formátum ("beágyazott opentype"), url ('font / Asap-Regular-webfont.woff') formátum ('woff'), url ('fonts / Asap-Regular-webfont.ttf') formátum ('truetype'), url ('font / Asap-Regular-webfont.svg # AsapRegular') formátum ('svg'); font-súly: normál; betűtípus: normál;  
 
A test színeinek színezése
 
Most egy háttérszínt adunk a test (amelynek világosabbnak kell lennie, mint a színalap), valamint meg kell adnia a betűtípuscsaládot és a betűméretet. Az effektet a Color funkciók segítségével közelíthetjük meg:
 
A következő kód 30% -kal világosítja a hátteret.
 
test háttér: világosabb (@theme, 30%); font-family: AsapRegular, sans-serif; betűméret: 11pt; 
 
 
 
A navigáció formázása beágyazott szabályokkal
 
A LESS-ben a stílusok közvetlenül a szülő alá helyezhetők. Nézzük meg az alábbi kódot.
 
A nav A navigációhoz szükséges összes elemet tartalmazó címke a következő stílusokat kapja.
 
nav margin: 50px auto 0; szélesség: 788px; magasság: 45px; .határ; .árnyék; 
 
Figyeljük meg, hogy ahelyett, hogy egy csomó CSS-szabályt újra adnának, csak beillesztettem .határ hogy megadja a határstílust és .árnyék árnyék hozzáadásához. Valójában ezek az osztályok újra felhasználhatók egy másik elemben is, bárhol is szükséges.
 
 
 
Ezután stílusokat adunk a ul benne nav nulla párnázás és margó. Nem is olyan régen fogunk megközelíteni a stílust, hogy írunk ilyet:
 
nav … nav ul …
 
Nincs semmi baj ezzel a megközelítéssel, sőt, minden alkalommal csináltam, és elégedett vagyok vele. Azonban ez a módszer, sok CSS-tervező elmondta, verbális és bizonyos esetekben nem könnyen kezelhető.
 
Most csinálhatunk ilyet:
 
nav margin: 50px auto 0; szélesség: 788px; magasság: 45px; .határ; .árnyék; ul padding: 0; margin: 0; 
 
 
 
Ezután a menü egy sorban jelenik meg kijelző: inline ingatlan.
 
nav margin: 50px auto 0; szélesség: 788px; magasság: 45px; .határ; .árnyék; ul padding: 0; margin: 0; li kijelző: inline; 
 
 
 
Az alábbi szintaxisban megadjuk a menühorgony címke stílusát, és hozzáadjuk az előre meghatározott stílusokat, amelyek: .szöveg szín, .osztó, .gradiens.
 
nav margin: 50px auto 0; szélesség: 788px; magasság: 45px; .határ; .árnyék; ul padding: 0; margin: 0; li kijelző: inline; a text-decoration: nincs; kijelző: inline-block; balra lebeg; szélesség: 156px; magasság: 45px; szöveg-igazítás: központ; vonalmagasság: 300%; .textcolor (# f2f2f2); // Megváltoztathatja ezt a sort .divider; .gradiens; 
 
A fenti kódban hex színt alkalmazunk # f2f2f2 ahol a könnyedséget 50% -nál nagyobbnak tartjuk, ezért azt várnánk, hogy az árnyék sötét lesz (automatikusan). A kód többi része, amit biztos vagyok benne, meglehetősen magyarázó.
 
 
 
Ha azonban megnézzük a fenti eredményt, mindegyik menü elválasztóval rendelkezik, így az utolsó rész az aljáig túlfolyik. Tehát el kell hagynunk a navigációs sáv első és utolsó gyermekének határstílusát.
 
nav margin: 50px auto 0; szélesség: 788px; magasság: 45px; .határ; .árnyék; ul padding: 0; margin: 0; li kijelző: inline; a text-decoration: nincs; kijelző: inline-block; balra lebeg; szélesség: 156px; magasság: 45px; szöveg-igazítás: központ; vonalmagasság: 300%; .textcolor (# f2f2f2); // Megváltoztathatja ezt a sort .divider; .gradiens;  li: első gyermek a border-left: nincs;  li: utolsó gyermek a határ-jobb: nincs; 
 
 
 
Hover állam
 
Az utolsó lépéshez hozzáadjuk a lebegő hatást. LESS-ben hozzáadhatunk pszeudoelem mint például :lebeg használva & szimbólum.
 
nav margin: 50px auto 0; szélesség: 788px; magasság: 45px; .határ; .árnyék; ul padding: 0; margin: 0; li kijelző: inline; a text-decoration: nincs; kijelző: inline-block; balra lebeg; szélesség: 156px; magasság: 45px; szöveg-igazítás: központ; vonalmagasság: 300%; .textcolor (# f2f2f2); // Megváltoztathatja ezt a sort .divider; .gradiens; &: lebeg .hovereffect;  li: első gyermek a border-left: none;  li: utolsó gyermek a határ-jobb: nincs; 
 
 
 
Módosítsa a színtémát
 
Itt van a LESS hűvös része. Ha módosítani szeretnénk az általános színtémát, kevesebb sorban változtathatjuk meg, mint amire szüksége van a tiszta CSS-ben.
 
Ebben az esetben a navigációs színt kicsit könnyebbre változtatom. Egyszerűen változtassa meg a következő két sort.
 
@theme: #ccc; // Ezt módosítsa
 
.szövegszín (# 555); //És ez
 
És itt van az eredmény.
 
 
 
Készítsen LESS-t CSS-be
 
Amikor még mindig a LESS JavaScript-t használjuk, megragadja a .Kevésbé fájl, és statikus CSS-re lefordítja, hogy a standard böngésző értelmezhesse azt. Ez egy kettős feladat az ügyféloldalon, nem is beszélve a redundáns és a sávszélesség elvesztéséről. A LESS fő pontja a munkafolyamatban van, hogy egyszerűsítse a statikus CSS-nek dinamikusabbá és programozhatóbbá tételét..
 
Tehát, ha a navigációs sávot egy weboldalon szeretnénk élni, fontos, hogy a LESS fájlt statikus CSS-re fordítsuk.
 
Kattints a Crunch It! nagy gomb.
 
 
 
Mentse el a .less-t a testreszabási fájlunkba, kapcsolja össze a HTML-dokumentummal, és húzza ki a kapcsolatot .Kevésbé & less.js fájlból.
 
 .shadow box-shadow: 0 1px 2px 0 # 555555;  .divider border-style: szilárd; határszélesség: 0 1px 0 1px; határszín: átlátszó # 444444 átlátszó # 888888;  .gradient háttér: lineáris gradiens (felső, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect háttér: lineáris gradiens (felső, # 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') formátum ("beágyazott opentype"), url ('font / Asap-Regular-webfont.woff') formátum ('woff'), url ('fonts / Asap-Regular-webfont.ttf') formátum ('truetype'), url ('font / Asap-Regular-webfont.svg # AsapRegular') formátum ('svg'); font-súly: normál; betűtípus: normál;  test háttér: # a2a2a2; font-family: AsapRegular, sans-serif; betűméret: 11pt;  nav margin: 50px auto 0; szélesség: 788px; magasság: 45px; határ-sugár: 3px; határ: 1px szilárdság # 505050; doboz-árnyék: 0 1px 2px 0 # 555555;  nav ul padding: 0; margin: 0;  nav ul li display: inline;  nav ul li a text-decoration: nincs; kijelző: inline-block; balra lebeg; szélesség: 156px; magasság: 45px; szöveg-igazítás: központ; vonalmagasság: 300%; szín: # f2f2f2; szöveg-árnyék: 1px 1px 0px # 000000; határstílus: szilárd; határszélesség: 0 1px 0 1px; határszín: átlátszó # 444444 átlátszó # 888888; háttér: lineáris gradiens (felső, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: hover háttér: lineáris gradiens (felső, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: első gyermek a border-left: nincs;  nav ul li: utolsó gyermek a határ-jobb: nincs;  
 
Nézzük meg ismét az eredményt.
 
 
 
És végeztünk, kérjük, próbálkozzon vele.
 
Következtetés
 
Ma már sok dolgot tanultunk a LESS nyelvről, például:
 

• változók.
• mixinek
• Paraméteres keverékek
• Művelet
• Őrzött Mixins
• És beágyazott szabályok

Annak ellenére, hogy sok mindent lehet lefedni, és sok lehetőséget kell bemutatni és megmagyarázni, reméljük, hogy élvezte ezt az alapvető oktatást.

• Demó
• Letöltés forrása