„LESS CSS“ pamoka „Slick“ meniu kūrimas Naršymo juosta

Šis straipsnis yra dalis mūsų „HTML5 / CSS3 vadovų serija“ - skirta padėti jums tapti geresniu dizaineriu ir (arba) kūrėju. Paspauskite čia pamatyti daugiau tos pačios serijos straipsnių.

Web dizainas ir vystymosi pasaulis tikrai sparčiai vystosi. Tai matome daugelyje naujų dalykų, kurie buvo paleisti bendruomenėje (beveik) kasdien, ar tai būtų programos ar naujos sistemos, kurios padėtų mūsų kasdienį darbą, kaip žiniatinklio dizainerius ar kūrėjus, efektyviau ir efektyviau.

Viena, kuri šiandien atkreipė dėmesį į interneto dizaino vystymąsi, yra „LESS“, programuojamo stiliaus lentelės kalba, kuri praplečia CSS sintaksės rašymo būdą, derindama kai kurias programavimo sąvokas, pvz., Kintamuosius, mišinius, funkcijas ir operacijas.

Jis atveria naujas galimybes rašydamas CSS sintaksę. Pavyzdžiui, taikydami „Mixins“ CSS, kaip tai darome programoje, dabar galime išsaugoti numatytuosius stilius ir vertes, kurias galima taikyti visame faile, kai tik įmanoma. Todėl nereikės vėl ir vėl rašyti tų pačių stilių.

Na, atlikkime keletą pratimų su „LESS“, kad geriau suprastume, ką ji turi pasiūlyti.

Projektavimas su LESS

Šioje pamokoje mes stengsimės sukurti slidžios meniu naršymo juostą, įkvėptą iš Apple.com. Atkreipkite dėmesį, kad originalus gaminys „įkvėpė“ tik tai, kad galutinis mokymo produktas nebus toks pats, kaip originalas.

Jei norite pradėti, pirmiausia galite perskaityti šiuos naudingus išteklius. Jie paaiškina kai kurias pagrindines „LESS“ kalbos versijas, kurios jums bus naudingos prieš pradedant gilintis į šią pamoką.

• LESS is More: Padarykite savo CSS kodavimą lengviau naudodamiesi LESS
• Rašykite geresnį CSS su mažiau
• Įvadas į mažesnį ir palyginamesnį su Sass

Paruošimas

Visų pirma, yra keletas esminių dalykų, kurių mums reikia šiam mažam projektui, ty:

1. mažiau teksto redaktoriaus

Norint koduoti navigacijos meniu, reikės teksto redaktoriaus. Tačiau dauguma šiandien rinkoje esančių teksto redaktorių (pvz., „Dreamweaver“, „Notepad ++“, „InType“, „Sublime“ tekstas 2) dar turi palaikyti .mažiau failų plėtiniai pagal numatytuosius nustatymus, todėl sintaksė gali būti netinkama.

Taigi, šios pamokos tikslais mes naudosime specialų teksto redaktorių LESS pavadinimui ChrunchApp. Galime atidaryti ir redaguoti .mažiau pratęsimo failus ir ją sukompiliuoti į statinę CSS, naudojant šią programą. Kadangi tai yra „Adobe Air“ programa, ją galima įdiegti visose pagrindinėse darbalaukio operacinėse sistemose (Win, OSX ir Linux).

HTML redaktoriui galite naudoti bet kurį redaktorių, kurį jau naudojate dabar. Aš asmeniškai mėgstu Sublime Text 2.

2. Less.js

Po to atsisiųskite LESS JavaScript biblioteką iš savo oficialios svetainės, dabartinė versija yra 1.2.1. Įdėkite jį į savo praktikos aplanką.

Tada susieti failą su HTML dokumentu.

3. Be priedų

Mes taip pat pasinaudosime keliomis CSS3 funkcijomis, kad navigacijos meniu atliktume tam tikrus efektus, kurie apims tiekėjo prefiksus (-moz-, -o-, -žiniatinklio rinkinys-), kad jis tinkamai pateiktų įvairias naršykles. Vis dėlto aš asmeniškai nepritariu prefiksų naudojimui, nes jis išpūs CSS failą.

Dėl šios priežasties nusprendžiau naudoti be priedų, „Lea Verou“ sukurtą „JavaScript“ biblioteką, kuri fone automatiškai tvarkys tiekėjo prefiksus. Taigi mums reikės tik parašyti oficialią sintaksę iš W3C.

Atsisiųskite failą ir susieti jį su HTML failu.

Gerai, mes visi esame įsteigti; dabar pradėkime HTML žymėjimo struktūrizavimą.

HTML žymėjimas

Navigacija yra gana paprasta. Jame bus penki meniu, suvynioti į nereguliuojamo sąrašo žymą. Atidarykite mėgstamą HTML redaktorių ir padarykite šį žymėjimą:

LESS Styling

Šiame skyriuje pradėsime naršyti su LESS kalba. Tiems, kurie yra nauji programavimo tipo kalbai, CSS sintaksės rašymas su LESS jaučiasi šiek tiek keistai ir nepatogiai. Tačiau nesijaudinkite, kai jau turite tam tikrą praktiką, tai tikrai bus maloniau nei būdas rašyti gryną CSS (tai mano patirtis, tai taip pat yra šiek tiek priklausomybė).

Pažvelkime navigacijos stilių iš įkvėpimo šaltinio.

Kaip matome aukščiau pateiktame paveikslėlyje, „Apple.com“ navigacija turi šiuos 6 pagrindinius bendrus stilius:

• šešėlis
• sienos
• daliklis
• nuolydžiai
• užveskite efektą
• tekstą

Mes išsaugosime šiuos stilius ir išsaugosime juos viduje config.less kaip numatytąjį stilių Konfigūracija; kai kurie dizaineriai taip pat gali jį pavadinti lib.css tai reiškia Biblioteka. Susieti šį failą su mūsų dokumentu.

Įsitikinkite, kad jį įdėjote prieš „LESS JavaScript“ biblioteką.

Nustatykite spalvų bazę su kintamaisiais

Šiame etape nustatysime navigacijos spalvų bazę naudojant kintamuosius. LESS kintamasis deklaruojamas naudojant @ simbolis.

@theme: # 555;

Tai @theme kintamasis yra mūsų standartinė spalva; mes naudosime jį visais įmanomais būdais, kad pasiektume tobulą spalvų schemą ir kad būtų tikimasi, kad spalvų kompozicija taps labiau suderinta.

Nustatykite numatytuosius šešėlių stilius su „Mixins“

Vienas iš savybių, kurias mėgstu LESS, yra „Mixins“. Tai programavimo koncepcija, kurioje saugomi keli iš anksto nustatyti stiliai, kurie LESS programoje gali būti paveldėti klasėse ar ID vėliau stiliaus lape.

.šešėlis box-shadow: 0 1px 2px 0 @theme; 

Pirmiau pateiktame kode aš neįtraukiau prenumeruotos versijos langelis-šešėlis nuosavybė, nes biblioteka be priedų juos tvarkys automatiškai. Be to, šešėlių spalva paveldima iš temos kintamos spalvos.

Apibrėžkite sienos stilių su parametriniais mišiniais

Navigacijos juostai reikės skirtingos sienos spalvos su šiek tiek apvaliu kampu. Mes galime sudaryti sienos stilių, naudodami Parametric Mixins. Jis iš tikrųjų turi tokias pačias funkcijas kaip ir „Mixins“, vienintelis skirtumas yra tas, kad jis taip pat turi keičiamų parametrų, todėl vertės yra labiau reguliuojamos.

.siena (@radius: 3px) border-radius: @radius; siena: 1px kietas @theme - # 050505; 

Aukščiau pateiktame kode nustatėme numatytąją ribą @radius dėl 3px ir kaip jau minėjome, ši vertė gali būti pakeista vėliau.

Nustatykite gradientą, daliklį ir judėjimo stilių su operacija

Operacija yra tiesiog programavimo kalba, kur mes galime taikyti matematinę formulę, pavyzdžiui, papildymą, skaidymą, atimimą ir dauginimą, kad gautume norimą rezultatą. Pažvelkime į šį kodą:

.daliklis sienos stilius: kietas; sienos plotis: 0 1px 0 1px; pasienio spalva: skaidrus @theme - # 111 skaidrus @theme + # 333; 

Aukščiau esančiame kode atimame @theme kintamasis # 111, tokiu būdu kairiojo krašto spalvų išėjimas būtų šiek tiek tamsesnis. Nors teisinga sienos spalva gaunama pridėjus @theme kintamas su šešiakampio spalva # 333, produkcija būtų lengvesnė.

Spalvų schemos lygis

Kai kurie iš jūsų, kurie gali būti supainioti su formulėmis, išnagrinėsime toliau pateiktą spalvų schemos diagramą, kad geriau suprastume:

Maksimalus tamsus tonas yra # 000 (juoda), o maksimalus šviesos tonas #fff (balta) ir mūsų dabartinė spalvų bazė yra # 555. Taigi, jei norime, kad spalvų bazė būtų 3 lygiai tamsesni iš dabartinės, mes galime tiesiog ją atimti # 333. Taip pat galima taikyti ir spalvai palengvinti.

Be to, mes veiksime gradiento spalvą.

.gradientas (fonas: tiesinis gradientas (viršuje, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 151515 100%);  .hovereffect fonas: tiesinis gradientas (viršuje, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Apibrėžkite teksto stilių su apsauginiais mišiniais

Mes planuojame turėti 2 spalvas naršymo juostoje, ne tamsiai spalva ir viena šviesa. Naudojame du sąlyginius pareiškimus tekstui naudojant „Guard Mixins“.

Pirma, kai tekstui suteikiama spalva, kurios šviesumas yra lygus arba didesnis kaip 50% teksto šešėlis turėtų pasukti tamsiai, šiuo atveju spalva # 000000.

.textcolor (@txtcolor) kai (šviesumas (@txtcolor)> = 50%) color: @txtcolor; teksto šešėlis: 1px 1px 0px # 000000; 

Tada, kai tekstui suteikiama spalva, kad šviesumas yra mažesnis nei 50% teksto šešėlis bus baltas.

.textcolor (@txtcolor) kai (šviesumas (@txtcolor)) 
Importuoti LESS
 
Dabar sukurkime kitą .mažiau failas pavadintas styles.less ir importuoti config.less tuo susidomėjęs:
 
@import "config.less";
 
Pridėti šriftų šeimą
 
Kad naršymo juosta atrodytų patrauklesnė, naudosime naują šriftų šeimą @ šrifto veidas taisyklė. Stebėtinai, @ šrifto veidas taisyklė jau yra palaikoma nuo IE6!
 
Šį kartą naudosime „Asap“ šriftą. Atsisiųskite ją iš šrifto šriftų kolekcijos. Tada į neseniai sukurtą stilių įterpkite šiuos stilius styles.less failą.
 
@ šrifto-veido font-family: „AsapRegular“; src: url („šriftai / Asap-Regular-webfont.eot“); src: url („šriftai / Asap-Regular-webfont.eot? #iefix“) formatas („įterptas-opentype“), URL („šriftai / Asap-Regular-webfont.woff“) formatas („Woff“), URL („fonts / Asap-Regular-webfont.ttf“) formatas („truetype“), URL („šriftai / Asap-Regular-webfont.svg # AsapRegular“) formatas („svg“); šrifto svoris: normalus; šrifto stilius: normalus;  
 
Kūno su spalvų funkcijomis stilius
 
Dabar mes suteiksime fono spalvą kūnas (tai turėtų būti lengvesnė už spalvų bazę), taip pat nurodant šriftų šeimą ir šrifto dydį. Galime pasiekti efektą naudojant spalvų funkcijas:
 
Šis kodas palengvins foną 30%.
 
kūnas fonas: apšviesti (@theme, 30%); font-family: AsapRegular, sans-serif; šrifto dydis: 11pt; 
 
 
 
Navigacijos stiliaus suformavimas
 
LESS'e mes galime patalpinti stilius tiesiai pagal savo tėvą. Pažvelkime į žemiau pateiktą kodą.
 
The nav žyma, kurioje yra visi būtini navigacijos elementai, suteiks šiuos stilius.
 
nav margin: 50px auto 0; plotis: 788px; aukštis: 45px; .border; .shadow; 
 
Atkreipkite dėmesį, kad vietoj to, kad dar kartą pateiktumėte CSS taisykles, aš tik įterpiau .sienos suteikti sienos stilių ir .šešėlis pridėti šešėlį. Tikrais atvejais šie klasių rinkiniai gali būti pakartotinai panaudoti ir kitame elemente, nesvarbu, kur tai reikalinga.
 
 
 
Toliau pateikiame stilius ul viduje nav turėti nulinį užpildą ir paraštę. Ne taip seniai artėsime prie stiliaus rašydami kažką panašaus:
 
nav … nav ul …
 
Nėra nieko blogo dėl šio požiūrio, iš tikrųjų aš tai dariau kiekvieną kartą ir esu gana patogus. Tačiau šis metodas, pasak daugelio CSS dizainerių, yra veržlus ir kai kuriais atvejais nėra lengvai valdomas.
 
Dabar galime tai padaryti:
 
nav margin: 50px auto 0; plotis: 788px; aukštis: 45px; .border; .shadow; ul padding: 0; marža: 0; 
 
 
 
Ir tada meniu bus rodomas iš eilės naudojant ekranas: inline nuosavybė.
 
nav margin: 50px auto 0; plotis: 788px; aukštis: 45px; .border; .shadow; ul padding: 0; marža: 0; li ekranas: inline; 
 
 
 
Žemiau esančioje sintaksėje nurodome meniu ankerinio žymeklio stilių ir pridedame iš anksto nustatytus stilius: .teksto spalva, .daliklis, .gradientas.
 
nav margin: 50px auto 0; plotis: 788px; aukštis: 45px; .border; .shadow; ul padding: 0; marža: 0; li ekranas: inline; teksto apdaila: nėra; ekranas: inline-block; plūdė: kairė; plotis: 156px; aukštis: 45px; teksto derinimas: centras; linijos aukštis: 300%; .textcolor (# f2f2f2); // Galite pakeisti šią eilutę. .gradientas; 
 
Aukščiau pateiktame kode mes naudojame šešių spalvų spalvą # f2f2f2 kuriame lengvumas laikomas virš 50%, todėl tikimės, kad šešėlis taps tamsus (automatiškai). Likusi kodo dalis, kurią aš tikiu, yra visiškai savaime suprantama.
 
 
 
Tačiau, jei pažvelgsime į aukščiau esantį rezultatą, kiekvienas meniu turi skirstytuvus, todėl paskutinė sekcija perpildyta į apačią. Taigi turime praleisti pirmojo ir paskutinio naršymo juostos vaiko sienos stilių.
 
nav margin: 50px auto 0; plotis: 788px; aukštis: 45px; .border; .shadow; ul padding: 0; marža: 0; li ekranas: inline; teksto apdaila: nėra; ekranas: inline-block; plūdė: kairė; plotis: 156px; aukštis: 45px; teksto derinimas: centras; linijos aukštis: 300%; .textcolor (# f2f2f2); // Galite pakeisti šią eilutę. .gradientas;  li: pirmas vaikas a left-left: none;  li: paskutinio vaiko a sienos teisė: nėra; 
 
 
 
Hover valstybė
 
Paskutinį žingsnį pridėsime hover efektą. LESS'e galime pridėti pseudo elementas toks kaip : Pakimba naudojant & simbolis.
 
nav margin: 50px auto 0; plotis: 788px; aukštis: 45px; .border; .shadow; ul padding: 0; marža: 0; li ekranas: inline; teksto apdaila: nėra; ekranas: inline-block; plūdė: kairė; plotis: 156px; aukštis: 45px; teksto derinimas: centras; linijos aukštis: 300%; .textcolor (# f2f2f2); // Galite pakeisti šią eilutę. .gradientas; & hover .hovereffect;  li: pirmas vaikas a left-left: none;  li: paskutinio vaiko a sienos teisė: nėra; 
 
 
 
Pakeiskite spalvų temą
 
Čia yra vėsioje LESS dalyje. Jei norime pakeisti bendrą spalvų temą, mes galime tai padaryti per mažiau linijų pakeitimų, nei reikia gryname CSS.
 
Tokiu atveju navigacijos spalvą pakeisiu šiek tiek lengvesniu. Tiesiog pakeiskite šias dvi eilutes.
 
@theme: #ccc; // Pakeiskite
 
.textcolor (# 555); //Ir šis
 
Ir čia yra rezultatas.
 
 
 
Sudarykite LESS į CSS
 
Kai mes vis dar naudojame „LESS JavaScript“, tai bus patraukti .mažiau failą ir išversti jį į statinį CSS, kad standartinė naršyklė galėtų ją interpretuoti. Tai yra dvigubas darbas kliento pusėje, jau nekalbant apie nereikalingą ir atliekų srautą. Pagrindinis „LESS“ dalykas yra darbo eigoje, kad supaprastintume mūsų praktiką statant CSS, kad būtų labiau dinamiška ir programuojama.
 
Taigi, kai ketiname naršymo juostą gyventi svetainėje, svarbu, kad LESS failas būtų sukompiliuotas į statinį CSS.
 
Spustelėkite Crunch It! didelis mygtukas.
 
 
 
Išsaugokite .less failą mūsų pratybų faile, susieti jį su HTML dokumentu ir atsieti .mažiau & less.js failą iš dokumento.
 
 .shadow box-shadow: 0 1px 2px 0 # 555555;  .divider sienos stilius: kietas; sienos plotis: 0 1px 0 1px; pasienio spalva: skaidrus # 444444 skaidrus # 888888;  .gradientinis fonas: tiesinis gradientas (viršutinis, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect fonas: tiesinis gradientas (viršutinis, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ šrifto-veido font-family: „AsapRegular“; src: url („šriftai / Asap-Regular-webfont.eot“); src: url („šriftai / Asap-Regular-webfont.eot? #iefix“) formatas („įterptas-opentype“), URL („šriftai / Asap-Regular-webfont.woff“) formatas („Woff“), URL („fonts / Asap-Regular-webfont.ttf“) formatas („truetype“), URL („šriftai / Asap-Regular-webfont.svg # AsapRegular“) formatas („svg“); šrifto svoris: normalus; šrifto stilius: normalus;  kūnas fonas: # a2a2a2; font-family: AsapRegular, sans-serif; šrifto dydis: 11pt;  nav paraštė: 50px auto 0; plotis: 788px; aukštis: 45px; pasienio spindulys: 3px; siena: 1px kietas # 505050; dėžutės šešėlis: 0 1px 2px 0 # 555555;  nav ul padding: 0; marža: 0;  nav ul li display: inline;  nav ul li a text-decoration: nėra; ekranas: inline-block; plūdė: kairė; plotis: 156px; aukštis: 45px; teksto derinimas: centras; linijos aukštis: 300%; spalva: # f2f2f2; teksto šešėlis: 1px 1px 0px # 000000; sienos stilius: kietas; sienos plotis: 0 1px 0 1px; pasienio spalva: skaidrus # 444444 skaidrus # 888888; fonas: tiesinis gradientas (viršutinis, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: hover fonas: tiesinis gradientas (viršutinis, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: pirmas vaikas a left-left: none;  nav ul li: paskutinis vaikas a right-right: no;  
 
Pažvelkime į rezultatą dar kartą.
 
 
 
Ir mes darome, nedvejodami eksperimentuokite su juo.
 
Išvada
 
Šiandien išmokome daug dalykų apie „LESS“ kalbą:
 

• Kintamieji.
• Mišiniai
• Parametriniai mišiniai
• Operacijos
• Saugomi mišiniai
• Ir įdėtos taisyklės

Nors yra daug dalykų, kuriuos galima aptarti toliau, ir daug galimybių parodyti ir paaiškinti, tikimės, kad jums patiko ši pagrindinė pamoka.

• Demo
• Atsisiųsti šaltinį