Første trin med Less.js

Webapplikationsudvikling tager os ned ad mange veje, men alle disse stier har én ting tilfælles: kode HTML og kode CSS, hvilket giver os mange muligheder for at få vores applikationer til at se ud, som vi vil, eller som vi forestiller os.
Hvad der sker nu er, at da hver person har sin måde at udvikle på, er de resulterende koder mange gange meget omfattende eller noget rodet, hvilket medfører, at vedligeholdelse og ydeevne påvirkes lidt. Det er her bibliotekerne og forprocessorer kommer ind, der hjælper os med at skrive en lidt renere og mere effektiv kode og dermed også hjælpe teamwork, da mange af disse biblioteker får os til at skrive bedre kode.
Less.jsNavn Less.js stammer fra kombinationen af ​​ordene CSS Leaner, noget som CSS tyndere eller reduceret, hvilket allerede giver os en idé om, hvad denne præprocessor skal gøre, hvilket ikke er andet end at hjælpe os med at skrive mindre CSS-kode og dermed forbedre læsbarheden og ydeevnen af ​​vores applikationer og websider. Det er baseret på JavaScript så vi kan bruge det enten på klientsiden, selvom denne praksis ikke anbefales til produktion, eller også fra serversiden takket være npm og Node.js, så det kan blive plugin for nogle JavaScript -rammer at vi kører i øjeblikket.
Den vigtigste idé at vedtage Less.js i vores udviklingsmiljø, er at hjælpe med at opfylde princippet TØR, hvilket betyder ikke at gentage os selv, og for at opnå dette Less.js indeholder funktioner, klasser og variabler, der gør det muligt for os at skrive meget mere genanvendelig kode, end hvad vi ville skrive i CSS direkte.
1- Vi har brug for en moderne browser, der kan fortolke de eksempler, som vi vil beskæftige os med, det kan være Google Chrome eller Firefox Developer Edition.
2- Vi skal have en teksteditor i stilen af sublim tekst eller NotePad ++ for at kunne skrive vores eksempler mere komfortabelt.
3- Endelig har vi brug for tilladelser til at installere elementer via kommandokonsol og en internetforbindelse for at downloade de nødvendige ressourcer.
InstallationInstallation af Less.js Det kan gøres på to måder, den første direkte på klientniveau og den anden i et servermiljø som f.eks Node.jsLad os se hver af disse måder herunder.
Denne installationsform er lige så let som blot at kalde den fil, der indeholder biblioteket Less.js, og det er simpelthen allerede inkluderet i vores miljø. For at downloade biblioteket skal vi bare gå til lesscss.org og downloade den nyeste stabile version.

FORSTØRRE

Når vi har den downloadede fil, kan vi fortsætte med at lave et lille eksempel, der vil hjælpe os med at vide, om vi har vores miljø klar til at udvikle sig med Less.js, derfor skal vi udføre følgende trin:
1- Vi skal oprette en mappe og indeni oprette en fil kaldet index.html, så finder vi filen less.min.js inde i mappen dist af versionen af Less.js som vi har downloadet, derudover vil vi oprette en fil kaldet stilarter. uden, strukturen af ​​det vi har beskrevet skal se ud som det vi ser nedenfor:

2- Så skal vi skrive følgende kode herunder inde i vores index.html så vi har noget, vi kan anvende CSS og så tjek stilarterne:

 Første trin med Less.js Vores header Indholdet Vores footer

Her ser vi først og fremmest en struktur HTML grundlæggende, hvor inden for legeme vi har placeret en etiket header, en etiket afsnit og endelig en etiket sidefod, dette giver os tre helt forskellige elementer, som vi kan anvende stilarter på CSS.
3- Nu inde i etiketten hoved fra den tidligere kode vil vi inkorporere vores fil stilarter. uden og efter denne optagelse af filen less.js, på dette tidspunkt er det meget vigtigt at understrege det less.js det vil altid blive inkluderet efter vores filer .mindre at stilarterne vil bære, og det er også vigtigt at bemærke, at filerne .mindre som vi inkluderer, skal have attributten rel som følger: rel = "stylesheet / less" siden uden dette kompilatoren mindre de ved ikke, at de skal arbejde med den fil. Lad os se, hvordan vores head -tag vil se ud med den ekstra kode, der skal føjes til koden fra det foregående trin:

 Første trin med Less.js 

4- Nu skal vi bare tilføje nogle stilarter CSS inde i filen stilarter. uden, koden herunder, hvad der vil gøre, er at differentiere de forskellige etiketter, vi skaber med forskellige farver:

 sidehoved {farve: blå;} sektion {farve: grå;} sidefod {farve: gul;}

5- Hvis vi åbner vores index.html med en browser vil vi se, hvordan stilen har ændret sig, og hvis vi åbner en udviklerkonsol, ser vi de meddelelser, den udskriver less.js For at lade os vide, at det virker, lad os se på følgende billede, hvordan det ser ud:

Vi kan endda lave en lidt mere dybdegående øvelse, og vi kan åbne kildekoden for vores eksempel i browseren og se hvordan less.js genereret en kode CSS i vores dokument, at vi ikke inkluderer:

På serversidenInstallationen på klientsiden er meget nyttig, når vi udvikler, da den giver os mulighed for at gøre en slags fejlfinde i realtid og dermed observere ændringerne i øjeblikket, men for et produktionsmiljø anbefales det slet ikke, i første omgang spilder vi tid, mens Less.js genererer typografiarkene, og for det andet fordi vi uploader vores filer .mindre der kan kopieres af andre mennesker. Derfor vil vi nu se, hvordan vi arbejder med Less.js når du installerer din compiler, til dette vil vi bruge pakkehåndteringen npm.
Vi skal have et eksempel på funktionel npm, derfor anbefaler vi at installere den nyeste version af Node.js til vores operativsystem.
Vi har også brug for tilstrækkelige tilladelser til at kunne installere pakker med npm, og for at udføre instruktioner på kommandokonsol -niveau, er dette meget vigtigt især i miljøer Linux Y Mac, så i Windows tilladelser er lettere at behandle på dette niveau.
1- Fra en kommandokonsol skal vi udføre følgende instruktion med npm:

 npm installere -g mindre

2- Det foregående trin fik os til at installere kompilatoren Less.js, hedder mindrec, det, den gør, er, at den forvandler vores kode mindre i gyldig CSS -kode til brug i en browser, så vi vil teste det, for dette vil vi oprette en fil kaldet eksempel. uden med følgende kode inde:

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

3- Når ovenstående er gjort, går vi til vores konsol og udfører følgende instruktion for at generere en fil .css hvor vores kompilerede kode vil hvile:

 lessc example.less> eksempel.css

I vores resulterende fil får vi det, vi ser på følgende billede:

Hvis vi ønsker et komprimeret resultat eller formindsket tilføj bare -x parameter efter at have ringet mindrec som følgende:

 lessc -x eksempel. uden> eksempel. css

Hvad giver os følgende formalet css som resultat:

I det sidste eksempel på installationerne i henhold til anvendelsesmåden så vi det for at placere farven på en simpel etiket s. s vi gør flere ting, for det første definerer vi en farvevariabel med @ modifikator, betyder det, at vi kan kalde farver eller værdier inden for variabler i hele vores dokument, så vi kan have en variabel @colorTitle og med dette ved vi, at hvor som helst vi vil bruge titelfarven, foretager vi kun det opkald.
Genanvendelige rutinerEn anden ting, vi så, var, at vi skabte en funktion kaldet .highlight () og indeni placerer vi en attribut CSS og dens værdi var vores variabel, er dette et andet eksempel på, hvordan vi kan opbygge genanvendelige rutiner inden for vores stilarter, så i enhver klasse eller attribut, at vi vil fremhæve noget, skal vi bare kalde den funktion, som vi gjorde inde i p -elementet i eksempel.
Således ser vi, at vigtigheden af Less.js er, at det hjælper os med at tænke mere over, hvordan man gør mindre, og dermed resultere med en komprimeret, gyldig og letlæselig kode til sidst, i eksemplet kunne det have været sagt, at der blev skrevet meget for så lidt CSS resulterer, men tanken er, at når vi skal lave meget CSS, skriver vi mindre, så vi ser det Less.js det viser sig, når vi laver store stylesheets.
Med dette afslutter vi denne vejledning, vi har lært at tage vores første skridt med Less.js, så nu har vi gode værktøjer til at kunne bygge flotte applikationer eller websider ved at bruge den mindst mulige mængde kode.