LESS CSS - algaja juhend
CSS-i eelprotsessor on nüüdseks saanud veebiarenduse staapiks. See saadab tavalise CSS-i programmeerimisomadustega, nagu muutujad, funktsioonid või Mixin ja operatsioon, mis võimaldab veebiarendajatel ehitada modulaarsed, skaleeritavad ja paremini juhitavad CSS-stiilid.
Selles postituses vaatleme LESS-i, mis on olnud üks populaarsemaid CSS eelprotsessoreid, ning seda on laialdaselt kasutatud arvukates front-end raamistikes nagu Bootstrap. Me jalutame ka läbi põhilised kommunaalteenused, tööriistad ja seadistused, mis aitavad teil LESSiga töötada.
Kompilaator
Kõigepealt peame seadistama kompilaatori. LESS süntaks on W3C spetsifikatsiooni järgi mittestandardsed. Brauser ei suuda väljundit töödelda ja muuta, hoolimata CSS-ile sarnanevatest omadustest.
Siin on pilk LESS koodile:
@ värvialus: # 2d5e8b; .klass1 taustavärv: @ värvitoon; .class2 taustavärv: #fff; värv: @ värvi alus;
Koostaja töötleb koodi ja muudab LESS-süntaksit brauseriga ühilduvaks CSS-vorminguks:
.class1 taustavärv: # 2d5e8b; .klass1. klass2 taustavärv: #fff; värv: # 2d5e8b;
CSS-i koostamiseks on mitmeid tööriistu:
JavaScripti kasutamine
LESS'iga kaasneb less.js fail, mis on teie veebisaidile väga lihtne paigaldada. Loo stiilileht koos .vähem ja ühendage see dokumendis rel = "stiilileht / vähem" atribuut.
JS-faili saate siit saada, laadige see alla Boweri pakettihalduri kaudu, muidu otse CDN-i linki, näiteks:
Olete kõik seadistatud ja saate koostada stiile .vähem. LESS-i süntaks koostatakse lehel laadimise ajal. Pea meeles, et JavaScripti kasutamine on tootmisetapis takistatud, kuna see mõjutab oluliselt veebisaidi toimivust.
Peaksite alati LESS süntaksit eelnevalt ja ainult koostama teenindama regulaarset CSS-i selle asemel. Sa võid kasutada Terminal, Task Runner meeldib Grunt või Gulp, või graafiline rakendus.
CLI kasutamine
LESS pakub natiivset käsurealiidest (CLI), vähem, mis tegeleb mitmete ülesannetega peale LESS süntaksi koostamise. CLI abil saame kodeerida koodid, tihendada faile ja luua lähtekoodi. Käsk põhineb Node.js-il, mis võimaldab käsul töötada Windowsi, OS X ja Linuxi kaudu.
Veenduge, et Node.js on paigaldatud (vastasel juhul haarake paigaldaja siia), seejärel installige LESS CLI läbi NPM (Node Package Manager), kasutades järgmist käsurida.
npm install -g vähem
Nüüd on teil vähem teie käsutuses olev LESS-i CSS-i koostamiseks:
lessc style.less style.css
Ülesande Runner kasutamine
Ülesanne on tööriist, mis automatiseerib arendusülesandeid ja töövooge. Selle asemel, et käivitada vähem käsk iga kord, kui me tahame oma koodid koostada, saame seadistada ülesande jooksja installimise ja seada selle vaatama muudatusi meie LESS failides ning koostama kohe LESSi CSS-sse.
Kaks populaarset tööriista selles kategoorias on täna Grunt ja Gulp. Meil on need tööriistad, mis hõlmavad neid tööriistu. Kontrollige postitusi, et õppida, kuidas neid tööriistu oma tööprotsessis kasutada.
- Kuidas kasutada Gruntit töövoo automatiseerimiseks
- Gulp.jsiga alustamine
- Ehitamise skriptide lahing: Gulp Vs Grunt
Graafilise rakenduse kasutamine
Neile, kes ei pruugi olla terminali ja käsurea kasutamisega harjunud, saavad nad selle asemel valida graafilise liidese. Tänapäeval on LESSi jaoks kõikidel platvormidel palju rakendusi - mõningaid tasuta, mõningaid tasuta
Siin on täielik nimekiri:
| Rakendus | Platvorm | Maksumus |
| Segu | OS X / Windows | Tasuta |
| Koala | OS X / Windows / Linux | Tasuta |
| Prepros | OS X / Windows | Freemium (USD29) |
| WinLESS | Windows | Tasuta |
| CodeKit | OS X | USD32 |
Milline kompilaator, mille valite (mitte JavaScript), ei ole ausalt öeldes oluline, kui tööriist töötab ja täiendab teie töövoogu..
Koodiredaktor
Võite kasutada mis tahes koodiredaktorit. Lihtsalt installige plugin või laiend, et tõsta esile LESS süntaks õigete värvidega, mis on nüüd saadaval peaaegu kõigile koodiredaktoritele ja IDE-dele, sealhulgas SublimeText, Notepad ++, VisualStudio, TextMate ja Eclipse, et nimetada vaid mõnda.
Nüüd, kui meil on kompilaator ja koodiredaktor, on meil võimalik alustada CSS-stiilide kirjutamist LESS-süntaksiga.
LESS Syntax
Erinevalt tavalisest CSS-ist, nagu me teame, töötab LESS palju rohkem programmeerimiskeelena. See on dünaamiline, seega oodake mõningaid terminoloogiaid Muutujad, Toimimine ja Reguleerimisala tee peal.
Muutujad
Kõigepealt vaatame Muutujad.
Kui olete CSS-iga üsna pikka aega töötanud, olete ilmselt kirjutanud midagi sellist, kus meil on kogu stiili lehel deklaratsiooniplokkidele määratud korduvad väärtused.
.class1 taustavärv: # 2d5e8b; .klass2 taustavärv: #fff; värv: # 2d5e8b; .class3 border: 1px solid # 2d5e8b;
See praktika on tegelikult hea - kuni me leiame, et peame läbi sõeluma rohkem kui tuhat või rohkem sarnast väljavõtet kogu stiili lehel. See võib juhtuda suuremahulise veebilehe ehitamisel. Töö muutub tüütu.
Kui me kasutame sellist CSS-eelprotsessorit nagu LESS, ei oleks ülaltoodud näide probleem - me saame seda kasutada Muutujad. Muutujad võimaldavad meil salvestada konstant väärtust, mida hiljem saab kasutada kogu stiili lehel.
@ värvialus: # 2d5e8b; .klass1 taustavärv: @ värvitoon; .klass2 taustavärv: #fff; värv: @ värvi alus; .class3 border: 1px solid @ color-base;
Ülaltoodud näites salvestame värvi # 2d5e8b Euroopa @ värvi alus muutuja. Kui soovite värvi muuta, peame muutma ainult selle muutuja väärtust.
Lisaks värvile võite ka muudesse väärtustesse lisada näiteks:
@ font-family: Georgia @ dot-border: dotted @ üleminek: lineaarne @opacity: 0.5
Segud
LESSis saame kasutada Segud taaskasutada kogu deklaratsiooni CSS reeglis, mis on määratud teises reeglistikus. Siin on näide:
.gradientid (taust: #eaeaea; taust: lineaarne gradient (ülemine, #eaeaea, #cccccc); taust: -o-lineaarne gradient (ülemine, #eaeaea, #ccccccc); taust: -ms-lineaarne gradient (ülemine, #eaeaea, #cccccc); taust: -moz-lineaarne gradient (ülemine, #eaeaea, #ccccccc); taust: -webkit-lineaarne gradient (ülemine, #eaeaea, #cccccc);
Ülaltoodud väljavõttes oleme vaikimisi seadistanud gradient värvi sees .kalded klassi. Kui me tahame lisada gradiente, siis lihtsalt sisestame .kalded nii:
div .gradients; piir: 1px tahke # 555; raadius: 3x;
The .kasti pärandab kogu deklaratsiooni bloki .kalded. Seega on ülaltoodud CSS-reegel võrdne järgmise lihtsa CSS-iga:
div background: #eaeaea; taust: lineaarne gradient (ülemine, #eaeaea, #cccccc); taust: -o-lineaarne gradient (ülemine, #eaeaea, #ccccccc); taust: -ms-lineaarne gradient (ülemine, #eaeaea, #cccccc); taust: -moz-lineaarne gradient (ülemine, #eaeaea, #ccccccc); taust: -webkit-lineaarne gradient (ülemine, #eaeaea, #cccccc); piir: 1px tahke # 555; raadius: 3x;
Lisaks, kui kasutate oma veebisaidil palju CSS3-d, saate kasutada oma töö lihtsamaks muutmiseks LESS Elements-i. LESS Elements on levinud kollektsioon CSS3 segud et me võime sageli kasutada laaditabeleid, näiteks raadius, kalded, vari ja nii edasi.
LESS Elements'i kasutamiseks lisage lihtsalt @import reegel oma LESS-i stiililehel, kuid ärge unustage seda kõigepealt alla laadida ja lisada see oma töökausta.
@import "elements.less";
Me võime nüüd kõik uuesti kasutada klassid pakutakse elemente, näiteks lisada 3px raadius kuni a div, me saame kirjutada:
div .rounded (3px);
Edasiseks kasutamiseks vaadake palun ametlikku dokumentatsiooni.
Sisestatud reeglid
Kui kirjutad stiilid tavalisse CSS-i, siis võib-olla ka olete jõudnud läbi nende tüüpiliste koodistruktuuride.
nav kõrgus: 40 px; laius: 100%; taust: # 455868; alumine serv: 2px tahke # 283744; nav li laius: 600 px; kõrgus: 40px; nav li a color: #fff; rea kõrgus: 40 pikslit; teksti vari: 1px 1px 0px # 283744;
Lihtsa CSS-i puhul valime lapse elemendid, suunates kõigepealt iga vanemate reeglistiku, mis on oluliselt üleliigne, kui me järgime “parimaid tavasid” põhimõtet.
LESS CSS-is saame reeglistikku lihtsustada lapse elementide pesitsemine vanemate sees, järgnevalt;
nav kõrgus: 40 px; laius: 100%; taust: # 455868; alumine serv: 2px tahke # 283744; li laius: 600 px; kõrgus: 40px; a värv: #fff; rea kõrgus: 40 pikslit; teksti vari: 1px 1px 0px # 283744;
Võite määrata ka pseudo-klassid, meeldib :hõljuma, valijale, kasutades sümbolit (ja).
Oletame, et tahame lisada :hõljuma ülalpool olevale ankurmärgile, saame selle kirjutada nii:
a värv: #fff; rea kõrgus: 40 pikslit; teksti vari: 1px 1px 0px # 283744; &: hover taustavärv: # 000; värv: #fff;
Toimimine
Me võime ka operatsioone teostada LESSis, näiteks lisamine, lahutamine, korrutamine ja jagamine stiililehel olevate numbrite, värvide ja muutujate.
Oletame, et tahame, et element B oleks kaks korda kõrgem kui element A. Sellisel juhul saame seda kirjutada:
@height: 100 px .element-A kõrgus: @height; .element-B kõrgus: @ kõrgus * 2;
Nagu näete ülalpool, salvestame kõigepealt väärtuse @height määrake väärtus elemendile A.
Elemendis B, mitte ise kõrguse arvutamiseks, me võime korrutada kõrgust 2-ga tärniga operaatori (*) abil. Nüüd, kui me muudame väärtust @height muutuja, element B on alati kaks korda kõrgem.
Vaadake meie eelmises juhendis täpsemaid toimimisnäiteid: Slick Menu Navigeerimisriba kujundamine.
Reguleerimisala
LESS rakendab Reguleerimisala mõiste, kus muutujaid päritakse kõigepealt kohalikust ulatusest ja kui see ei ole kohapeal kättesaadav, otsib see laiemat ulatust.
päis @color: black; taustavärv: @color; nav @color: sinine; taustavärv: @color; a color: @color;
Ülaltoodud näites on päis on must taustavärv, kuid navtaustavärv on sinine kuna sellel on @color muutuja kohalikus ulatuses, samas kui a on ka sinine, mis pärineb tema lähimast vanemast, nav.
Lõplik mõte
Lõppkokkuvõttes loodame, et see postitus annab teile põhiteadmised sellest, kuidas me saaksime LESSi abil paremini kirjutada CSS-i. Esmalt tunnete ennast veidi ebamugavalt, aga kui seda sagedamini proovite, muutub see kindlasti palju lihtsamaks.
Siin on paar õpetust, mida soovitan teil uurida täiendavaid näpunäiteid ja praktikaid, mis aitavad teie LESS oskusi järgmisele tasandile tõsta.
- LESS CSS juhendaja: Slick Menu navigeerimisriba kujundamine
- LESS-värvifunktsioonide mõistmine
- 3 Uued LESS CSS funktsioonid, mida peaksite teadma
