Share
Nu cu mult timp în urmă am aruncat o privire la Bazele mai puțin și, în timp ce aceasta este o referință solidă pentru începători, există mult mai mult de făcut cu LESS! Scopul acestui tutorial este de a extinde cunoștințele din articolul precedent și de a vă oferi câteva sfaturi practice despre cum să utilizați toate lucrurile minunate despre LESS.
Conceptele din articolul precedent vor fi esențiale pentru a nu respecta acest aspect. Variabilele, amestecurile, funcțiile și cuibăritul în LESS ar trebui să fie toate cunoscute și ar trebui să aveți cel puțin câteva mâini pe cunoașterea LESS.
Notă: există o sumă echitabilă de sfaturi subiective în acest articol. Multe lucruri pe care le vom discuta au de-a face cu metodologia, spre deosebire de regulile și reglementările unei limbi. Vă voi arăta cum organizez fișiere și creează mixuri, dar ar putea exista alte modalități mai bune de a face lucrurile. Dacă credeți că utilizați o structură mai bună sau dacă aveți câteva sfaturi și trucuri proprii, nu ezitați să vă lăsați liberi în comentarii.
Organizarea fișierelor dvs. este întotdeauna extrem de importantă, foarte mult pentru LESS. De obicei, creez un folder "stiluri" în directorul meu principal de proiect în care stochez toate stilurile necesare pentru proiectul respectiv. Deci, ce se întâmplă dacă proiectul dvs. vă cere să includeți fișiere css din mai multe locații?
Cea mai bună modalitate de a vă face viața mai ușoară este să utilizați un instrument precum Winless sau CodeKit. Aceste instrumente vă permit să compilați fișiere diferite în locații diferite. Acest lucru vă permite să păstrați toate fișierele de stil într-o singură locație, în timp ce le compilați efectiv în foldere diferite în cadrul proiectelor dvs..
După cum puteți vedea, în acest proiect WordPress, fișierul "stilless" evidențiat este conținut în dosarul "stiluri". Deoarece WordPress necesită un fișier 'style.css' din directorul principal trebuie să-l compilam acolo. CodeKit sau un instrument similar face acest lucru ușor, deoarece trebuie doar să o configurați o dată și apoi îl puteți uita până la sfârșitul proiectului.
O altă problemă care se poate ivi cu fișierele CSS este cum să gestionați fișierele terților. Sistemele Grid, stilurile pentru glisoarele JavaScript, reinițializările și multe altele necesită utilizarea unor fișiere CSS (uneori multiple). Există de obicei două metode pentru a face acest lucru să se întâmple. Puteți fie să conectați fișierele la pagina dvs. web separat, fie să plasați întregul cod în interiorul unui fișier și să îl minimizați în scopuri de performanță. Cu o unealtă mai puțin compilatoare, acest lucru devine din nou mai ușor!
Utilizând regulile de import puteți trage toate fișierele în foaia dvs. principală LESS. Puteți importa și mai puține fișiere, făcând ca regulile, mixurile și alte elemente să fie utilizate în toate fișierele ulterioare.
Notă: în timp ce această metodă este utilă, nu este o soluție universală. În unele cazuri, poate fi necesar să includeți toate fișierele separat, în altele ar fi mai bine să includeți totul în interiorul unui fișier.
Cea mai mare problemă cu CSS este lipsa extremă de consecvență în aproape toate proiectele. Această situație se datorează în principal naturii limbii în sine, nu neapărat din cauza ineptării programatorului. CSS este o limbă foarte slabă și iertantă, ceea ce înseamnă că ea promovează configurația în raport cu convenția, în timp ce inversul ar fi de preferat. În plus, CSS tinde să fie codificat și mai procedural decât de obicei, ceea ce înseamnă că modelele globale nu sunt întotdeauna observate și implementate la fel de simplu cum ar putea fi.
În timp ce LESS nu este un cureall, vă permite să fiți mult mai consecvenți, oferindu-vă instrumente cum ar fi funcții și cuiburi. Să aruncăm o privire la câteva exemple în care puteți obține o mai bună coerență cu instrumentele LESS.
.raza (@radius: 5px) -webkit-border-radius (@radius); -khtml-raza de graniță (@radius); -moz-raza de graniță (@radius); -i-raza de graniță (@radius); - raza de graniță (@radius); raza de graniță (@radius);
Fără LESS ar trebui să copiați aceste reguli ori de câte ori este necesar. Mulți oameni scriu doar pe măsură ce merg, astfel încât este mult mai probabil să uiți unul dintre prefixe sau să le scrieți într-o ordine diferită. În timp ce acestea nu ar fi breakbreakers pentru site-ul dvs., fiecare inconsistență mică adaugă zgomot inutil la codul dvs..
Natura instabilă a regulilor vă oferă de asemenea șansa de a adăuga ordine în codul dvs. Încerc să folosesc cat mai puține divizii și alte elemente ale containerului și încerc să direcționez fiecare element cât mai exact posibil
.lista de comentarii .comment .comment-date .comment-time culoare: # 888;
Acest lucru pare un pic redundant la început și sunt de acord, într-un anumit sens este. Cu toate acestea, face totul clar.
Utilitatea acestui lucru va fi evidentă numai dacă îl folosiți într-un proiect mai amplu, dar aici este un fragment rapid care arată modul în care un comentariu este recepționat. Sub o lățime specifică, partea temporală a datei de comentariu este ascunsă pentru a economisi spațiu.
Ecranul @media și (max-width: 600px) .commentlist .comment-container .comment-principal .comment-header .comment-date .time display: none;
Sunt de acord că acest lucru pare oribil. Cu toate acestea, nici o gândire nu a mers în crearea unei reguli. Nici un fel de gândire nu înseamnă că te-ai bătut ușor, pentru că nu trebuie să dai seama de trucurile inteligente pe care le-ai adăugat pe parcurs. De asemenea, puteți spune ce face această regulă doar dacă o priviți.
Ultimul meu argument pentru consecvență este unul mai complex, dar cred că merită analizat. Am construi teme WordPress de vânzare pe ThemeForest și o caracteristică este că poți alege orice culoare pentru tema ta. Elementele sunt recolorate la alegerea ta. Modul în care se face acest lucru este că oricând este definită o "culoare primară" este suprascrisă cu codul CSS dinamic pe care îl emitem cu PHP. Aceasta arată cam așa:
Conținutul fișierului nostru MICI:
@ color-primar: roșu; .button background: @ color-primar; padding: 8px 20px;
Conținutul unui PHP inclus la sfârșitul antetului HTML:
Practic, ori de câte ori există o referință la '@ color-primary' în fișierul LESS, trebuie să creați o regulă PHP pentru a vă asigura că culorile alese de utilizator sunt reflectate pe site. Acest lucru poate dura ceva timp și mai important este extrem plictisitor. Pentru a lupta cu plictiseala, creăm un script care ne analizează fișierul LESS și creează codul PHP pe care îl putem copia și lipi dintr-o dată. Acesta este un pic diffcult, deoarece există câteva reguli dinamice cu funcții și ce nu, dar pentru a scoate acest lucru, fișierul LESS trebuie să fie bine structurat și consistent.
O mare oportunitate de timp și o modalitate de a crește coerența între proiecte este de a folosi o bibliotecă comună de reguli. Anterior am întrebat; de ce scrie toate regulile de rază de graniță atunci când putem folosi un mixin? Acum putem sărim un nivel mai înalt. De ce rescrie raza de chenar mixin pentru fiecare proiect atunci cand poti folosi doar aceeasi?
Există câteva mixuri (mai ales cele care se referă la specificul furnizorilor) care vor fi aceleași pentru toate proiectele. Acestea pot fi separate într-un fișier "mixins.less" pe care îl puteți folosi oriunde doriți. Iată câteva exemple de amestecuri care sunt întotdeauna la îndemână pentru a avea în jur.
.opacitate (@opacitate: 0,8) @opacitate: @opacitate * 100; filtru: ~ "alfa (opacitate = @ ieopacitate)"; -khtml-opacitate: @opacity; -moz-opacitate: @opacitate; opacitate: @opacitate;
.gradient (@start, @end) background: @start; filtru: ~ "progid: DXImageTransform.Microsoft.gradient (startColorstr =" @ start ", endColorstr =" @ end ", GradientType = 0)"; fundal: -webkit-gradient (liniar, stânga sus, jos stânga, oprire color (0%, start), oprire color (100%, @ sfârșit)); fundal: -webkit-linear-gradient (top, @ start 0%, @end 100%); fundal: -moz-linear-gradient (top, @ start 0%, @end 100%); fundal: -ms-linear-gradient (top, @ start 0%, @end 100%); fundal: -o-linear-gradient (top, @ start 0%, @end 100%); fundal: gradient liniar (top, @ start 0%, @end 100%);
.element color (@color) atunci când (luminozitate (@color)> = 60%) culoare: @color - # 888; . culoarea elementului (@color) atunci când (luminozitatea (@color) < 60% ) color: #fff;
Ultimul este foarte cool. Dacă culoarea de fundal este ușoară, culoarea textului va fi o versiune foarte închisă a aceleiași culori.
Vă sugerăm întotdeauna să vă gândiți la plasarea regulii pe care o scrieți. Sunteți sigur (ă) că este utilizat global pentru toate proiectele? Ar putea fi tentant să punem o mulțime de reguli acolo, dar în realitate ar fi mai bine să creați un fișier specific proiectului.
Amintiți-vă mai devreme imaginea comentariului? Containerul acelui element are un format specific. Are o graniță albă și un contur gri. Multe alte elemente din această temă împărtășesc acest model. Acest lucru ar putea fi creat cu o regulă de genul:
.cutie border: 1px solid #fff; schiță: 1px solid #dedede; .comment .box; fundal: #eeeeee;
În timp ce asta este folosit peste tot aici, nu va fi același în cadrul mai multor proiecte. Prin urmare, ar fi mai bine să creați un fișier ca "mytheme.less" care conține aceste reguli utilizate pe scară largă, dar specifice temelor. Dacă într-adevăr doriți să utilizați ceva de genul fișierului global, puteți să îl extindeți astfel:
.box-border (@ border color: #fff, @ outline-color: #dedede) margine: 1px solid @ border-color; schiță: 1px solid @ outline-color;
Această regulă vă va permite să creați acelasi stil de cutie la fel de ușor, dar puteți adăuga, de asemenea, parametri pentru a crea chenare de culoare diferită. Puteți face acest pas cu mai mult prin abstractizarea lucrurilor și mai mult și crearea unui fișier "bootstrap.less"; acest lucru ne aduce frumos în următorul nostru subiect, creând un cadru pentru noi înșine.
@ border-box-border-color: #fff; @ border-box-outline-color: #dedede;
.(@bc: @ border-box-border-color, @oc: @ border-box-outline-color) margine: 1px solid @bc; schiță: 1px solid @oc;
Crearea cadrului dvs. propriu-zis este de obicei un "nu", cu excepția cazului în care sunteți foarte avansat în domeniul dvs. principal (și 5-6 alții) și aveți motive foarte bune. Cu CSS și LESS este un pic diferit; puteți începe să creați propriul cadru din prima zi. Deoarece LESS este un superset de CSS tot ce se potrivește perfect cu codul existent. Deoarece CSS este iertător și cascadă, nu puteți face niciun prejudiciu permanent care nu poate fi anulat.
Vă sugerez să creați un fișier de principiu "mixins" pentru a începe cu. Puteți să eliminați întotdeauna lucrurile din acesta sau să le adăugați după cum este necesar. Mai târziu, puteți adăuga fișiere specifice unui proiect, fișiere terță parte, un fișier de bootstrap și așa mai departe. Iată cum este organizat cadrul meu.
Ca și în orice limbă, aspectele practice ale codării conțin numeroase provocări și tehnici diferite, care nu pot fi descoperite și depășite doar prin examinarea documentației. Pentru a utiliza mai puțin în măsura sa, ar trebui să citiți sugestiile și să încercați să luați în logică, dar în cele din urmă va trebui să câștigați experiență. Consistența, logica și simplitatea ar trebui să fie cuvintele voastre direcționiste și LESS vă oferă toate instrumentele necesare pentru a realiza acest lucru.
În cele din urmă, aș saluta contribuția dvs. și mi-ar plăcea să aud cum organizați mai puțin și cum îl implementați în proiectele dvs. Vă mulțumim pentru lectură!
Accentsconagua