Første trinn med Less.js

Webapplikasjonsutvikling tar oss ned på mange veier, men alle disse banene har en ting til felles: kode HTML og kode CSS, som gir oss mange muligheter til å få applikasjonene våre til å se ut som vi vil eller som vi forestiller oss.
Det som skjer nå er at ettersom hver person har sin måte å utvikle seg på, mange ganger er de resulterende kodene veldig omfattende eller noe rotete, noe som fører til at vedlikehold og ytelse påvirkes litt. Det er her bibliotekene og forprosessorene kommer inn som hjelper oss med å skrive en litt renere og mer effektiv kode, og dermed også hjelpe teamarbeid, siden mange av disse bibliotekene får oss til å skrive bedre kode.
Less.jsNavn Less.js stammer fra kombinasjonen av ordene CSS Leaner, noe som CSS tynnere eller redusert, noe som allerede gir oss en ide om hva denne forprosessoren skal gjøre, noe som ikke er annet enn å hjelpe oss med å skrive mindre CSS-kode, og dermed forbedre lesbarheten og ytelsen til applikasjonene og nettsidene våre. Det er basert på JavaScript så vi kan bruke den enten på klientsiden, selv om denne praksisen ikke anbefales for produksjon, eller også fra serversiden takket være npm og Node.js, så det kan bli plugin for noen JavaScript -rammeverk som vi kjører for øyeblikket.
Hovedideen å adoptere Less.js i vårt utviklingsmiljø, er å bidra til å oppfylle prinsippet TØRKE, som betyr å ikke gjenta oss selv, og å oppnå dette Less.js inneholder funksjoner, klasser og variabler som gjør det mulig for oss å skrive mye mer gjenbrukbar kode enn det vi ville skrive i CSS direkte.
1- Vi trenger en moderne nettleser som kan tolke eksemplene som vi skal håndtere, det kan være Google Chrome eller Firefox Developer Edition.
2- Vi må ha en tekstredigerer i stilen av Sublime Text eller NotePad ++ for å kunne skrive eksemplene våre mer komfortabelt.
3- Til slutt trenger vi tillatelser for å installere elementer via kommandokonsoll og en Internett -tilkobling for å laste ned de nødvendige ressursene.
InstallasjonInstallasjonen av Less.js Det kan gjøres på to måter, den første direkte på klientnivå, og den andre i et servermiljø som f.eks Node.jsLa oss se hver av disse måtene nedenfor.
Denne installasjonsformen er like enkel som å bare ringe filen som inneholder biblioteket Less.js, og det er rett og slett allerede inkludert i miljøet vårt. For å laste ned biblioteket må vi bare gå til lesscss.org og laste ned den siste stabile versjonen.

FORSTØRRE

Når vi har den nedlastede filen, kan vi fortsette med å lage et lite eksempel som vil hjelpe oss å vite om vi har miljøet vårt klart til å utvikle seg med Less.js, derfor må vi utføre følgende trinn:
1- Vi skal lage en mappe og inne lage en fil som heter index.html, så finner vi filen less.min.js inne i mappen dist av versjonen av Less.js som vi har lastet ned, i tillegg skal vi lage en fil som heter stiler. uten, strukturen til det vi har beskrevet skal se ut som det vi ser nedenfor:

2- Da skal vi skrive følgende kode nedenfor inne i vår index.html slik at vi har noe vi kan bruke CSS og så sjekk stilene:

 Første trinn med Less.js Vår topptekst Innholdet Vår bunntekst

Her ser vi først og fremst en struktur HTML grunnleggende, der innenfor kropp vi har plassert en etikett Overskrift, en merkelapp seksjon og til slutt en etikett bunntekst, gir dette oss tre helt forskjellige elementer som vi kan bruke stiler på CSS.
3- Nå inne på etiketten hode fra den forrige koden skal vi inkludere filen vår stiler. uten og etter denne inkluderingen av filen less.js, på dette tidspunktet er det veldig viktig å understreke det less.js den vil alltid være inkludert etter filene våre .mindre som stilene vil bære, og det er også viktig å merke seg at filene .mindre som vi inkluderer må ha attributtet rel som følger: rel = "stylesheet / less" siden uten dette kompilatoren mindre de vil ikke vite at de må jobbe med den filen. La oss se hvordan hodemerket vårt vil se ut med tilleggskoden for å legge til koden fra forrige trinn:

 Første trinn med Less.js 

4- Nå må vi bare legge til noen stiler CSS inne i filen stiler. uten, koden under hva som vil gjøre er å differensiere de forskjellige etikettene vi lager med forskjellige farger:

 topptekst {farge: blå;} seksjon {farge: grå;} bunntekst {farge: gul;}

5- Hvis vi åpner vårt index.html med en nettleser vil vi se hvordan stilen har endret seg, og hvis vi åpner en utviklerkonsoll vil vi se meldingene den skriver ut less.js For å gi oss beskjed om at det fungerer, la oss se på bildet nedenfor hvordan det ser ut:

Vi kan til og med gjøre en litt mer grundig øvelse, og vi kan åpne kildekoden til vårt eksempel i nettleseren og se hvordan less.js generert en kode CSS i dokumentet vårt at vi ikke inkluderer:

På serversidenInstallasjonen på klientsiden er veldig nyttig når vi utvikler oss, siden den lar oss gjøre en slags feilsøking i sanntid, og dermed observere endringene i øyeblikket, men for et produksjonsmiljø anbefales det ikke i det hele tatt, i første omgang kaster vi bort tiden mens Less.js genererer stilarkene, og for det andre fordi vi laster opp filene våre .mindre som kan kopieres av andre mennesker. Det er derfor nå skal vi se hvordan vi jobber med Less.js når du installerer kompilatoren din, for dette vil vi bruke pakkebehandleren npm.
Vi må ha et eksempel på funksjonell npm, det er derfor vi anbefaler å installere den nyeste versjonen av Node.js for vårt operativsystem.
Vi trenger også tilstrekkelige tillatelser for å kunne installere pakker med npm, og for å utføre instruksjoner på kommandokonsollnivå, er dette veldig viktig, spesielt i miljøer Linux Y Mac, slik at i Windows tillatelser er lettere å behandle på dette nivået.
1- Fra en kommandokonsoll må vi utføre følgende instruksjon med npm:

 npm installere -g mindre

2- Det forrige trinnet fikk oss til å installere kompilatoren Less.js, kalt mindrec, det det gjør er at det forvandler koden vår mindre i gyldig CSS -kode for bruk i en nettleser, så vi skal teste den, for dette vil vi lage en fil som heter eksempel. uten med følgende kode inne:

 @farge: blå; .highlight () {farge: @color;} p {.highlight ();}

3- Når ovenstående er gjort, går vi til konsollen vår og utfører følgende instruksjon for å generere en fil .css hvor vår kompilerte kode vil hvile:

 lessc eksempel.løs> eksempel.css

I den resulterende filen får vi det vi ser i følgende bilde:

Hvis vi ønsker et komprimert resultat eller minifisert bare legg til -x parameter etter å ha ringt mindrec som følgende:

 lessc -x eksempel.løs> eksempel.css

Hva gir oss følgende minifisert css som et resultat:

I det siste eksemplet på installasjonene i henhold til bruksmåten så vi det for å plassere fargen på en enkel etikett s vi gjør flere ting, først definerer vi en fargevariabel med @ modifikator, betyr dette at vi kan kalle farger eller verdier innenfor variabler i hele dokumentet, slik at vi kan ha en variabel @colorTitle og med dette vet vi at hvor som helst vi vil bruke tittelfargen, ringer vi bare den samtalen.
Gjenbrukbare rutinerEn annen ting vi så var at vi opprettet en funksjon kalt .fremheve () og inne setter vi et attributt CSS og verdien var vår variabel, dette er et annet eksempel på hvordan vi kan bygge gjenbrukbare rutiner i stilene våre, så i enhver klasse eller attributt som vi ønsker å markere noe, må vi bare kalle den funksjonen slik vi gjorde inne i p -elementet i eksempel.
Dermed ser vi at viktigheten av Less.js er at det hjelper oss å tenke mer på hvordan vi skal gjøre mindre, og dermed resultere med en komprimert, gyldig og lettlest kode på slutten, i eksempelet kunne det blitt sagt at mye ble skrevet for så lite CSS resulterer, men tanken er at når vi må gjøre mye CSS, skriver vi mindre, så vi ser det Less.js det viser seg når vi lager store stilark.
Med dette fullfører vi denne opplæringen, vi har lært å ta våre første skritt med Less.js, så nå har vi gode verktøy for å kunne bygge flotte applikasjoner eller websider med minst mulig kode.