LESS CSS - Pradedančiųjų vadovas
„CSS“ išankstinis procesorius dabar tapo žiniatinklio kūrimo pagrindu. Jis siunčia paprastą CSS su programavimo ypatybėmis, pvz., Kintamaisiais, funkcijomis arba „Mixin“ ir operacijomis, leidžiančiomis kurti interneto kūrėjus moduliniai, keičiamieji ir labiau valdomi CSS stiliai.
Šiame pranešime ketiname pažvelgti į „LESS“, kuris buvo vienas iš populiariausių „CSS“ išankstinių procesorių, ir taip pat buvo plačiai naudojamas daugelyje „front-end“ sistemų, tokių kaip „Bootstrap“. Mes taip pat eisime per pagrindiniai įrankiai, įrankiai ir sąrankos, padėsiančios jums pasiekti ir veikti su „LESS“.
Kompiliatorius
Visų pirma mums reikės nustatyti kompiliatorių. LESS sintaksė yra nestandartinė, pagal W3C specifikaciją. Naršyklė negalėtų apdoroti ir pateikti produkcijos, nepaisant paveldėjimo požymių, panašių į CSS.
Čia yra žvilgsnis į „LESS“ kodą:
@ spalvos bazė: # 2d5e8b; .class1 fono spalva: @ spalvos bazė; .class2 fono spalva: #fff; spalva: @ spalvos bazė;
Kompiliatorius apdoros kodą ir pavers LESS sintaksę į naršyklę atitinkantį CSS formatą:
.class1 fono spalva: # 2d5e8b; .class1 .class2 fono spalva: #fff; spalva: # 2d5e8b;
Yra keletas įrankių CSS kaupimui:
„JavaScript“ naudojimas
LESS ateina su less.js failą, kurį tikrai lengva įdiegti į savo svetainę. Sukurkite stilių lentelę su .mažiau ir pridėti jį savo dokumente naudodami rel = "stilių lentelė / mažiau" atributas.
JS failą galite gauti čia, atsisiųskite jį per „Bower“ paketo tvarkyklę, kitaip tiesiogiai susieti su CDN, pvz .:
Jūs visi esate nustatyti ir galite kurti stilius .mažiau. LESS sintaksė bus sukompiliuota skraidant kaip puslapio apkrova. Atminkite, kad naudojant „JavaScript“, gamybos stadijoje nepritariama, nes tai labai paveiks svetainės našumą.
Visada turėtumėte visada susikurti LESS sintaksę tarnauti reguliariai CSS vietoj to. Tu gali naudoti Terminalas, Task Runner patinka Grunt arba Gulp, arba grafinė programa.
CLI naudojimas
LESS suteikia vietinę komandinės eilutės sąsają (CLI), mažiau, kuri apdoroja keletą užduočių ne tik užpildydama LESS sintaksę. Naudodamiesi CLI, mes galime nukepti kodus, suspausti failus ir sukurti šaltinio žemėlapį. Ši komanda yra pagrįsta „Node.js“, kuri įgalina komandą dirbti „Windows“, „OS X“ ir „Linux“.
Įsitikinkite, kad įdiegtas „Node.js“ (kitaip paimkite diegimo programą), tada įdiegite „LESS CLI“ per NPM („Node Package Manager“) naudodami šią komandų eilutę.
npm įdiegti -g mažiau
Dabar jūs turite mažiau komandą, kad galėtumėte sudaryti LESS į CSS:
lessc style.less style.css
Naudojant užduočių bėgiklį
Užduočių vykdytojas yra įrankis, kuris automatizuoja kūrimo užduotis ir darbo eigą. Vietoj to, kad paleistumėte mažiau komandą kiekvieną kartą, kai norėtume surinkti savo kodus, galime įdiegti užduoties bėgiko ir nustatyti, kad peržiūrėtų mūsų LESS failų pakeitimus, ir nedelsdami sukompiliuoti LESS į CSS.
Šiandien šios kategorijos du populiarūs įrankiai yra „Grunt“ ir „Gulp“. Mes turime keletą pranešimų, kurie apima šiuos įrankius. Patikrinkite žinutes, kad sužinotumėte, kaip įdiegti šiuos įrankius į savo darbo eigą.
- Kaip naudoti Grunt automatizuoti savo darbo eigą
- Darbo su „Gulp.js“ pradžia
- Sukurti scenarijų mūšis: Gulp Vs Grunt
Naudojant grafinę programą
Tiems, kurie nėra pripratę prie terminalo ir komandų eilučių, jie gali pasirinkti grafinę sąsają. Šiandien visose platformose yra nemažai programų, kuriose galima užpildyti „LESS“
Čia yra visas sąrašas:
| „App“ | Platforma | Kaina |
| Mišinys | OS X / Windows | Laisvas |
| Koala | OS X / Windows / Linux | Laisvas |
| Prepros | OS X / Windows | „Freemium“ (USD29) |
| WinLESS | „Windows“ | Laisvas |
| CodeKit | OS X | USD32 |
Kuris kompiliatorius, kurį pasirinkote (išskyrus „JavaScript“), tikrai nėra svarbu, kol įrankis veikia ir papildo jūsų darbo eigą.
Kodo redaktorius
Galite naudoti bet kurį kodo redaktorių. Tiesiog įdiekite papildinį arba plėtinį, norėdami paryškinti LESS sintaksę su tinkamomis spalvomis. Ši funkcija yra prieinama beveik visiems kodų redaktoriams ir IDE, įskaitant „SublimeText“, „Notepad ++“, „VisualStudio“, „TextMate“ ir „Eclipse“..
Dabar, kai turime visus kompiliatorius ir kodo redaktorius, galime pradėti rašyti CSS stilius su LESS sintakse.
LESS Sintaksė
Skirtingai nuo įprastos CSS, kaip žinome, LESS veikia daug daugiau kaip programavimo kalba. Tai dinamiška, todėl tikimės rasti tam tikrų terminų Kintamieji, Operacija ir Taikymo sritis pakeliui.
Kintamieji
Pirmiausia, pažvelkime į Kintamieji.
Jei dirbate gana ilgai su CSS, tikriausiai parašėte kažką panašaus, kur visose stilių lentelėse deklaracijų blokuose priskiriamos pasikartojančios vertės..
.class1 fono spalva: # 2d5e8b; .class2 fono spalva: #fff; spalva: # 2d5e8b; .class3 border: 1px solid # 2d5e8b;
Ši praktika yra tikrai gera - kol pamatysime, kad turime persijoti daugiau nei tūkstančiai ar daugiau panašių fragmentų visame stiliaus lape. Tai gali atsitikti kuriant didelio masto svetainę. Darbas taps varginantis.
Jei mes naudojame CSS procesorių, pvz., „LESS“, aukščiau pateiktas atvejis nebūtų problema - galime naudoti Kintamieji. Kintamieji leis mums saugoti pastovus vertė, kuri vėliau gali būti panaudota visame stiliaus lape.
@ spalvos bazė: # 2d5e8b; .class1 fono spalva: @ spalvos bazė; .class2 fono spalva: #fff; spalva: @ spalvos bazė; .class3 border: 1px solid @ color-base;
Pirmiau pateiktame pavyzdyje saugome spalvą # 2d5e8b viduje konors @ spalvų bazė kintamasis. Jei norite pakeisti spalvą, mums reikia tik pakeisti šį kintamąjį.
Be spalvų, į kitas kintamasis taip pat galite įdėti kitas reikšmes, pavyzdžiui:
@ font-family: Gruzija @ dot-border: dotted @ transition: linijinis @opacity: 0.5
Mišiniai
LESS, mes galime naudoti Mišiniai iš naujo naudoti visas deklaracijas CSS taisyklėje, nustatytoje kitoje taisyklėje. Štai pavyzdys:
.gradientai fonas: #eaeaea; fonas: tiesinis gradientas (viršuje, #eaeaea, #cccccc); fonas: -o-linijinis gradientas (viršuje, #eaeaea, #cccccc); fonas: -ms-linijinis gradientas (viršuje, #eaeaea, #cccccc); fonas: -moz-linijinis gradientas (viršuje, #eaeaea, #cccccc); fonas: -webkit-linijinis gradientas (viršuje, #eaeaea, #cccccc);
Pirmiau pateiktame fragmente mes nustatėme numatytąjį gradientas spalvos viduje .nuolydžiai klasė. Kai tik norime pridėti nuolydžius, tiesiog įterpiame .nuolydžiai tokiu būdu:
div .gradients; siena: 1px kietas # 555; pasienio spindulys: 3px;
The .dėžė paveldės visą deklaracijos bloką viduje .nuolydžiai. Taigi aukščiau pateikta CSS taisyklė yra lygi šiam paprastam CSS:
div background: #eaeaea; fonas: tiesinis gradientas (viršuje, #eaeaea, #cccccc); fonas: -o-linijinis gradientas (viršuje, #eaeaea, #cccccc); fonas: -ms-linijinis gradientas (viršuje, #eaeaea, #cccccc); fonas: -moz-linijinis gradientas (viršuje, #eaeaea, #cccccc); fonas: -webkit-linijinis gradientas (viršuje, #eaeaea, #cccccc); siena: 1px kietas # 555; pasienio spindulys: 3px;
Be to, jei naudojate CSS3 daug savo svetainėje, galite naudoti „LESS Elements“, kad jūsų darbas taptų daug paprastesnis. LESS Elements - tai bendras rinkinys CSS3 mišiniai kad galime dažnai naudoti stilių lentelėse, pvz., pasienio spindulys, nuolydžiai, mesti šešėlį ir taip toliau.
Jei norite naudoti LESS Elements, tiesiog pridėkite @import taisyklė jūsų LESS stiliaus lape, tačiau nepamirškite jį atsisiųsti ir įtraukti į savo darbo katalogą.
@import "elements.less";
Dabar mes galime iš naujo panaudoti visus klasės iš elements.less, pavyzdžiui, pridėti 3px spindulys iki a div, galime rašyti:
div .rounded (3px);
Dėl tolesnio naudojimo žr. Oficialius dokumentus.
Įdėtos taisyklės
Kai rašote stilius paprastame CSS, jūs taip pat galėjote pereiti per šias tipines kodo struktūras.
nav aukštis: 40px; plotis: 100%; fonas: # 455868; apačioje: 2px kietas # 283744; nav li plotis: 600px; aukštis: 40px; nav li a color: #fff; linijos aukštis: 40px; teksto šešėlis: 1px 1px 0px # 283744;
Paprastame CSS mes pasirenkame vaiko elementus, pirmiausia nukreipdami tėvą į kiekvieną nustatytą taisyklę, kuri yra labai nereikalinga, jei sekame “geriausia praktika” principas.
LESS CSS sistemoje galime supaprastinti taisykles vaiko elementų lizdas tėvų viduje, taip:
nav aukštis: 40px; plotis: 100%; fonas: # 455868; apačioje: 2px kietas # 283744; li plotis: 600px; aukštis: 40px; a spalva: #fff; linijos aukštis: 40px; teksto šešėlis: 1px 1px 0px # 283744;
Taip pat galite priskirti pseudo klasės, Kaip : Pakimba, pasirinkimo mygtuku naudokite simbolį „ir“ (ir).
Tarkime, kad norime pridėti : Pakimba prie aukščiau esančio inkaro žyma, mes galime jį parašyti taip:
a spalva: #fff; linijos aukštis: 40px; teksto šešėlis: 1px 1px 0px # 283744; & hover fono spalva: # 000; spalva: #fff;
Operacija
Taip pat galime atlikti operacijas LESS, pavyzdžiui, pridėjimas, atėmimas, dauginimas ir padalijimas prie stilių lentelės numerių, spalvų ir kintamųjų.
Tarkime, kad mes norime, kad elementas B būtų du kartus didesnis už A elementą. Tokiu atveju mes galime rašyti tokiu būdu:
@ aukštis: 100px. elementas-A aukštis: @ aukštis; .elementas-B aukštis: @ aukštis * 2;
Kaip matote aukščiau, pirmiausia išsaugome vertę @height kintamasis, tada priskirti vertę elementui A.
B elemente, o ne patys apskaičiuoti aukštį, mes galime dauginti aukštį 2 naudojant žvaigždute operatorių (*). Dabar, kai keičiame vertę @height kintamasis, elementas B visada bus dvigubai didesnis.
Išsamesnės veiklos pavyzdžių ieškokite mūsų ankstesnėje instrukcijoje: „Slick Menu Navigation Bar“ kūrimas.
Taikymo sritis
LESS taikomas Taikymo sritis koncepcija, kurioje kintamieji bus paveldimi pirmiausia iš vietinės taikymo srities, o kai ji nėra vietoje, ji ieškos platesnės apimties.
header @color: black; fono spalva: @color; nav @color: mėlyna; fono spalva: @color; a color: @color;
Pirmiau pateiktame pavyzdyje antraštė turi juoda fono spalva, bet navfono spalva bus mėlyna kadangi ji turi @color kintamąjį savo vietinėje srityje, o a taip pat bus mėlyna, kuri yra paveldėta iš artimesnio tėvų, nav.
Galutinė mintis
Galų gale, tikimės, kad šis pranešimas gali suteikti jums pagrindinį supratimą apie tai, kaip geriau rašyti CSS naudojant LESS. Jūs galbūt jaučiate šiek tiek nepatogiai, bet, kaip bandote jį dažniau, tai tikrai taps daug lengviau.
Štai keletas pamokų, kurias raginu ieškoti tolesnių patarimų ir praktikos, kurios gali padėti prailginti LESS įgūdžius iki kito lygio.
- LESS CSS pamoka: Slick Menu navigacijos juostos projektavimas
- Supratimas apie mažesnes spalvų funkcijas
- 3 Naujos „LESS CSS“ funkcijos, kurias turėtumėte žinoti
