LESS CSS apmācība Slick Menu navigācijas joslas izstrāde

Šis raksts ir daļa no mūsu "HTML5 / CSS3 konsultāciju sērija" - veltīts, lai palīdzētu jums kļūt par labāku dizaineru un / vai izstrādātāju. Noklikšķiniet šeit lai redzētu vairāk rakstu no vienas sērijas.

Web dizains un attīstības pasaule strauji attīstās. To var redzēt daudzās jaunās lietās, kas tiek uzsāktas kopienā (gandrīz) ikdienā, vai tas būtu lietojumprogrammas vai jauni ietvari, kas palīdz padarīt mūsu ikdienas darbu par tīmekļa dizaineriem vai izstrādātājiem efektīvāku un efektīvāku.

Viens no tiem, kas šodien pievērsa manu uzmanību no web dizaina izstrādes, ir LESS, programmējams stilu lapas valoda, kas paplašina CSS sintakses rakstīšanas veidu, apvienojot dažas programmēšanas koncepcijas, piemēram, mainīgos, miksus, funkcijas un operācijas.

Tā atver jaunas iespējas, rakstot CSS sintaksi. Piemēram, piemērojot Mixins CSS, piemēram, kā mēs to darām programmā, mēs tagad varam saglabāt noklusējuma stilus un vērtības, kuras var izmantot visā failā, kad vien iespējams. Līdz ar to mums nebūs nepieciešams rakstīt tos pašus stilus atkal un atkal.

Nu, darīsim dažus vingrinājumus ar LESS, lai iegūtu labāku ieskatu par to, ko tā piedāvā.

Projektēšana ar LESS

Šajā apmācībā mēs centīsimies izveidot slidens izvēlnes navigācijas joslu, kas ir iedvesmota no Apple.com. Tā kā oriģinālais produkts ir tikai iedvesmots, ņemiet vērā, ka mūsu gala apmācības produkts nebūs tieši tāds pats kā oriģināls.

Lai sāktu darbu, vispirms varat izlasīt šādus noderīgos resursus. Viņi izskaidro dažus galvenos LESS valodas ieviešanas variantus, kas jums noderēs, pirms jūs sīkāk iepazīstaties ar šo pamācību.

• LESS ir vairāk: padariet savu CSS kodējumu vieglāku ar LESS
• Uzrakstiet labāku CSS ar mazāk
• Ievads mazināšanā un salīdzinājums ar Sassu

Sagatavošana

Pirmkārt, ir dažas būtiskas lietas, kas vajadzīgas šim mazajam projektam, tas ir:

1. LESS teksta redaktors

Lai kodētu navigācijas izvēlni, mums būs nepieciešams teksta redaktors. Tomēr lielākā daļa šodien pieejamo teksta redaktoru (piemēram, Dreamweaver, Notepad ++, InType, Sublime Text 2) vēl ir jāatbalsta .mazāk faila paplašinājumi pēc noklusējuma, tāpēc sintakse var nebūt labi izcelta.

Tāpēc šīs apmācības nolūkos mēs izmantosim speciālu teksta redaktoru LESS nosaukumam ChrunchApp. Mēs varam atvērt un rediģēt .mazāk paplašināšanas failus un apkopo to statiskā CSS, izmantojot šo programmu. Tā kā tā ir Adobe Air lietojumprogramma, to var instalēt visās galvenajās darbvirsmas operētājsistēmās (Win, OSX un Linux).

HTML redaktoram varat izmantot jebkuru redaktoru, kuru jūs jau ērti izmantojat tagad. Man personīgi patīk Sublime Text 2.

2. Less.js

Tālāk lejupielādējiet LESS JavaScript bibliotēku no savas oficiālās tīmekļa vietnes, pašreizējā versija ir 1.2.1. Novietojiet to savā prakses mapē.

Pēc tam savienojiet failu ar HTML dokumentu.

3. Bez prefiksa

Mēs arī izmantosim dažas CSS3 funkcijas, lai navigācijas izvēlnē veiktu dažus efektus, kas ietver piegādātāja prefiksu (-moz-, -o-, -webkit-), lai tā pareizi sniegtu informāciju dažādās pārlūkprogrammās. Tomēr es personīgi neatbalstu prefiksu lietošanu, jo tas uzpūst CSS failu.

Šī iemesla dēļ es nolēmu izmantot bez prefiksu, JavaScript bibliotēku, kuru izveidoja Lea Verou un kas automātiski apstrādās pārdevēja prefiksu fonā. Tāpēc mums būs nepieciešams tikai rakstīt oficiālo sintaksi no W3C.

Lejupielādējiet failu un saistiet to ar HTML failu.

Labi, mēs visi esam izveidoti; tagad sāksim strukturēt HTML atzīmi.

HTML iezīmēšana

Navigācija ir diezgan vienkārša. Tajā būs piecas izvēlnes, kas ietvertas neierobežota saraksta tagā. Atveriet savu iecienītāko HTML redaktoru un ievietojiet šādu atzīmi:

LESS Styling

Šajā sadaļā mēs sāksim veidot navigāciju ar LESS valodu. Tiem, kas ir jauni programmēšanas veida valodai, CSS sintakses rakstīšana ar LESS jutīsies mazliet dīvaina un neērta. Bet neuztraucieties, ja jums ir kāda prakse, tas noteikti būs patīkamāks par to, kā mēs rakstām tīru CSS (tā ir mana pieredze, tā ir arī nedaudz atkarīga).

Apskatīsim navigācijas stilu no mūsu iedvesmas avota.

Kā redzams iepriekšējā attēlā, Apple.com navigācijai ir šādi 6 galvenie kopīgie stili:

• ēna
• robežu
• dalītājs
• slīpumi
• hover efektu
• tekstu

Mēs saglabāsim šos stilus un saglabāsim tos iekšpusē config.less kā noklusējuma stilu Konfigurācija; daži dizaineri to var arī nosaukt lib.css tas nozīmē Bibliotēka. Saistiet šo failu uz mūsu dokumentu.

Pārliecinieties, ka ievietojat to pirms LESS JavaScript bibliotēkas.

Definējiet krāsu bāzi ar mainīgajiem

Šajā posmā mēs definēsim navigācijas krāsu bāzi, izmantojot mainīgos. Mainīgais lielums LESS tiek deklarēts, izmantojot @ simbols.

@theme: # 555;

Tas @theme mainīgais ir mūsu standarta krāsa; mēs to izmantosim visādā veidā, lai aizpildītu perfektu krāsu shēmu un lai sagaidāms, ka krāsu kompozīcija kļūs konsekventāka.

Definējiet noklusējuma ēnu stilu ar Mixins

Viena no LESS mīlestības iezīmēm ir Mixins. Tā ir programmēšanas koncepcija, kas saglabā vairākus iepriekš definētus stilus, kas LESS var tikt mantoti klasēs vai ID vēlāk stilu lapā.

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

Iepriekš minētajā kodā es neiekļautu prefiksu versiju kastes ēna īpašums, jo bez prefiksa bibliotēka tos apstrādās automātiski. Arī ēnu krāsa tiek mantota no temata mainīgās krāsas.

Definējiet robežu stilu ar parametru maisījumiem

Navigācijas joslai būs nepieciešama atšķirīga robežu krāsa ar nedaudz noapaļotu stūri. Mēs varam apkopot robežu stilu, izmantojot Parametric Mixins. Faktiski tam ir tādas pašas funkcijas kā Mixins, tikai atšķirība ir tā, ka tai ir maināmi parametri, tāpēc vērtības ir regulējamas.

.robeža (@radius: 3px) border-radius: @radius; robeža: 1px cietais @theme - # 050505; 

Iepriekš minētajā kodā mēs izveidojām noklusējuma robežu @radius par 3px un kā jau iepriekš minēts, šo vērtību var mainīt vēlāk.

Definējiet Gradientu, Divider un Hover Style ar darbību

Darbība ir vienkārši programmēšanas valoda, kurā mēs varam izmantot matemātisko formulu, piemēram, papildinājumu, sadalīšanu, atņemšanu un reizināšanu, lai iegūtu vēlamo rezultātu. Apskatīsim šādu kodu:

.dalītājs robežu stils: ciets; robežu platums: 0 1px 0 1px; rāmja krāsa: caurspīdīga @theme - # 111 caurspīdīga @theme + # 333; 

Iepriekš norādītajā kodā mēs atņemam @theme mainīgais # 111, tādā veidā kreisās malas krāsu izeja būtu nedaudz tumšāka. Lai gan pareizā robežu krāsa ir iegūta, pievienojot @theme mainīgs ar sešu krāsu # 333, produkcija būtu vieglāka.

Krāsu shēmas līmenis

Dažiem no jums, kas varētu tikt sajaukti ar formulām, apskatīsim zemāk redzamo krāsu shēmas diagrammu, lai iegūtu labāku izpratni:

Maksimālais tumšais tonis ir # 000 (melns), bet maksimālais gaismas signāls ir #fff (balts) un mūsu pašreizējā krāsu bāze ir # 555. Tātad, ja mēs vēlamies krāsu bāzi 3 līmeņi, kas ir tumšāki no pašreizējā, mēs to varam vienkārši atņemt # 333. Tādā pašā veidā var izmantot arī, lai atvieglotu krāsu.

Pēc tam mēs darbosim gradienta krāsu.

.gradients fons: lineārs gradients (augšā, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 151515 100%);  .hovereffect fons: lineārā gradienta (augšā, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Definējiet teksta stilu ar Guard Mixins

Mēs plānojam, ka navigācijas joslā būs divas krāsas, ne tumša krāsa un viena gaisma. Mēs izmantojam divus nosacītus paziņojumus tekstam, izmantojot Guard Mixins.

Pirmkārt, ja tekstam tiek piešķirta krāsa, kuras vieglums ir 50% vai lielāks teksta ēna tumsai, šajā gadījumā krāsai # 000000.

.textcolor (@txtcolor), kad (vieglums (@txtcolor)> = 50%) krāsa: @txtcolor; teksta ēna: 1px 1px 0px # 000000; 

Tad, kad tekstam tiek piešķirta krāsa, ka vieglums ir mazāks par 50% teksta ēna kļūs balts.

.textcolor (@txtcolor) kad (vieglums (@txtcolor) 
LESS importēšana
 
Tagad radīsim citu .mazāk faila nosaukums styles.less un importu config.less tajā:
 
@import "config.less";
 
Pievienojiet fontu saimi
 
Lai navigācijas josla izskatītos pievilcīgāka, mēs, izmantojot @ font-face noteikums. Pārsteidzoši, @ font-face noteikums jau ir atbalstīts kopš IE6!
 
Šoreiz mēs izmantosim Asap fontu. Lejupielādējiet to no fontu vāveres fonta sejas kolekcijas. Pēc tam ievietojiet šādus stilus nesen izveidotajam styles.less failu.
 
@ font-face font-family: 'AsapRegular'; src: url ('fonti / Asap-Regular-webfont.eot'); src: url (“fonts / Asap-Regular-webfont.eot? #iefix”) formāts (“iegultais-opentype”), url (“fonts / Asap-Regular-webfont.woff”) formāts (“woff”), URL (“fonts / Asap-Regular-webfont.ttf”) formāts (“truetype”), url (“fonts / Asap-Regular-webfont.svg # AsapRegular”) formāts (“svg”); fontu svars: normāls; fonta stils: normāls;  
 
Korpusa veidošana ar krāsu funkcijām
 
Tagad mēs piešķirsim fona krāsu ķermeni (tai jābūt vieglākai par krāsu bāzi), kā arī norādiet fontu saimi un fonta lielumu. Mēs varam tuvoties efektam, izmantojot krāsu funkcijas:
 
Turpmāk norādītais kods pasliktinās fonu ar 30%.
 
ķermenis fons: vieglāks (@theme, 30%); font-family: AsapRegular, sans-serif; fonta lielums: 11pt; 
 
 
 
Navigācijas veidošana ar ligzdoto noteikumu
 
LESS mēs varam ligzdot stili tieši tās vecākiem. Apskatīsim zemāk redzamo kodu.
 
The nav tagam, kas satur visus nepieciešamos navigācijas elementus, tiks piešķirti šādi stili.
 
nav margin: 50px auto 0; platums: 788px; augstums: 45px; .border; .shadow; 
 
Ievērojiet, ka tā vietā, lai atkal piešķirtu CSS noteikumus, es tikai ievietoju .robežu dot robežu stilu un .ēna lai pievienotu ēnu. Reālos gadījumos šīs klases var atkārtoti izmantot arī citā elementā, lai kur tas būtu nepieciešams.
 
 
 
Tālāk mēs piešķiram stilus ul iekšpusē nav ir nulle polsterējums un starpība. Ne tik sen mēs tuvojamies stilam, rakstot kaut ko līdzīgu:
 
nav … nav ul …
 
Šai pieejai nav nekas nepareizs, patiesībā es to darīju katru reizi un esmu diezgan apmierināts ar to. Tomēr šī metode, daudzi CSS dizaineri ir teikuši, ir pārspīlēta un dažos gadījumos nav viegli pārvaldāma.
 
Tagad mēs varam darīt kaut ko līdzīgu:
 
nav margin: 50px auto 0; platums: 788px; augstums: 45px; .border; .shadow; ul polsterējums: 0; starpība: 0; 
 
 
 
Pēc tam izvēlne tiks parādīta pēc kārtas, izmantojot displejs: inline īpašums.
 
nav margin: 50px auto 0; platums: 788px; augstums: 45px; .border; .shadow; ul polsterējums: 0; starpība: 0; li displejs: inline; 
 
 
 
Sintaksē zemāk mēs norādām izvēlnes enkura taga stilu un pievienojam mūsu iepriekš definētos stilus, kas ir: .teksta krāsa, .dalītājs, .slīpums.
 
nav margin: 50px auto 0; platums: 788px; augstums: 45px; .border; .shadow; ul polsterējums: 0; starpība: 0; li displejs: inline; a text-decoration: nav; displejs: inline-bloks; peldēt: pa kreisi; platums: 156px; augstums: 45px; teksta saskaņošana: centrs; līnijas augstums: 300%; .textcolor (# f2f2f2); // Jūs varat mainīt šo rindu. .gradient; 
 
Iepriekš norādītajā kodā mēs izmantojam sešu krāsu # f2f2f2 kurā vieglums tiek uzskatīts par virs 50%, tāpēc mēs sagaidām, ka ēna kļūs tumša (automātiski). Pārējais kods, ko es esmu pārliecināts, ir diezgan pašsaprotams.
 
 
 
Tomēr, ja mēs skatāmies uz iepriekšējo rezultātu, katrai izvēlnei ir dalītāji, tādējādi pēdējais posms pārplūst uz leju. Tāpēc mums ir jāizlaiž navigācijas joslas pirmā un pēdējā bērna robežu stils.
 
nav margin: 50px auto 0; platums: 788px; augstums: 45px; .border; .shadow; ul polsterējums: 0; starpība: 0; li displejs: inline; a text-decoration: nav; displejs: inline-bloks; peldēt: pa kreisi; platums: 156px; augstums: 45px; teksta saskaņošana: centrs; līnijas augstums: 300%; .textcolor (# f2f2f2); // Jūs varat mainīt šo rindu. .gradient;  li: pirmais bērns a left-left: none;  li: pēdējais bērns a robežas tiesības: nav; 
 
 
 
Hover valsts
 
Pēdējo soli mēs pievienosim hover efektu. LESS var pievienot pseidoelements piemēram, : lidināties izmantojot & simbols.
 
nav margin: 50px auto 0; platums: 788px; augstums: 45px; .border; .shadow; ul polsterējums: 0; starpība: 0; li displejs: inline; a text-decoration: nav; displejs: inline-bloks; peldēt: pa kreisi; platums: 156px; augstums: 45px; teksta saskaņošana: centrs; līnijas augstums: 300%; .textcolor (# f2f2f2); // Jūs varat mainīt šo rindu. .gradient; & hover .hovereffect;  li: pirmais bērns a left-left: none;  li: pēdējais bērns a robežas tiesības: nav; 
 
 
 
Mainiet krāsu tēmu
 
Šeit ir LESS vēsā daļa. Ja mēs vēlamies mainīt vispārējo krāsu tēmu, mēs to varam izdarīt mazāk, nekā nepieciešams tīrā CSS.
 
Šādā gadījumā es mainīšu navigācijas krāsu, lai tā būtu nedaudz vieglāka. Vienkārši nomainiet šādas divas rindas.
 
@theme: #ccc; // Mainiet šo
 
.textcolor (# 555); //Un šī
 
Un šeit ir rezultāts.
 
 
 
Kompilējiet LESS uz CSS
 
Kad mēs joprojām izmantojam LESS JavaScript, tas paņems .mazāk failu un tulkot to statiskajā CSS, lai standarta pārlūks to varētu interpretēt. Tas ir divkāršs darbs klienta pusē, nemaz nerunājot par lieku un izšķērdētu joslas platumu. LESS galvenais punkts ir darbplūsmā, lai vienkāršotu mūsu praksi statiskās CSS apkopošanā, lai tā būtu dinamiskāka un programmējama.
 
Tātad, kad mēs tuvojamies navigācijas joslai dzīvot tīmekļa vietnē, ir svarīgi apkopot LESS failu statiskajā CSS..
 
Noklikšķiniet uz Crunch It! liela poga.
 
 
 
Saglabājiet bezzīmi mūsu vingrinājuma failā, saistiet to ar HTML dokumentu un atvienojiet to .mazāk & less.js failu no dokumenta.
 
 .shadow box-shadow: 0 1px 2px 0 # 555555;  .divider border-style: ciets; robežu platums: 0 1px 0 1px; pierobežas krāsa: caurspīdīgs # 444444 caurspīdīgs # 888888;  .gradient fons: lineārais gradients (augšā, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect fons: lineārais gradients (augšā, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('fonti / Asap-Regular-webfont.eot'); src: url (“fonts / Asap-Regular-webfont.eot? #iefix”) formāts (“iegultais-opentype”), url (“fonts / Asap-Regular-webfont.woff”) formāts (“woff”), URL (“fonts / Asap-Regular-webfont.ttf”) formāts (“truetype”), url (“fonts / Asap-Regular-webfont.svg # AsapRegular”) formāts (“svg”); fontu svars: normāls; fonta stils: normāls;  ķermenis fons: # a2a2a2; font-family: AsapRegular, sans-serif; fonta lielums: 11pt;  nav starpība: 50px auto 0; platums: 788px; augstums: 45px; robežu rādiuss: 3px; robeža: 1px cietais # 505050; kastes ēna: 0 1px 2px 0 # 555555;  nav ul polsterējums: 0; starpība: 0;  nav ul li display: inline;  nav ul li a text-decoration: nav; displejs: inline-bloks; peldēt: pa kreisi; platums: 156px; augstums: 45px; teksta saskaņošana: centrs; līnijas augstums: 300%; krāsa: # f2f2f2; teksta ēna: 1px 1px 0px # 000000; robežu stils: ciets; robežu platums: 0 1px 0 1px; pierobežas krāsa: caurspīdīgs # 444444 caurspīdīgs # 888888; fons: lineārs gradients (augšā, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: hover fons: lineārs gradients (augšā, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: pirmais bērns a left-left: none;  nav ul li: pēdējais bērns robežas tiesības: nav;  
 
Apskatīsim rezultātu vēlreiz.
 
 
 
Un mēs esam darīti, lūdzu, nekautrējieties eksperimentēt ar to.
 
Secinājums
 
Mūsdienās mēs esam uzzinājuši daudz par LESS valodu, piemēram:
 

• Mainīgie.
• Mixins
• Parametriskie maisījumi
• Darbības
• Apsargāti jaukti
• Un ligzdotie noteikumi

Lai gan ir daudzas lietas, kas var tikt tālāk aplūkotas, un daudzas iespējas, kuras var parādīt un izskaidrot, mēs ceram, ka jums patika šī pamata apmācība.

• Demo
• Lejupielādes avots