LESS CSS - iesācēju ceļvedis
CSS pirmsprocesors tagad ir kļuvis par tīmekļa izstrādes pamatelementu. Tā nosūta vienkāršu CSS ar programmēšanas iezīmēm, tādām kā mainīgie, funkcijas vai Mixin, un darbība, kas ļauj tīmekļa izstrādātājiem veidot moduļu, pielāgojamiem un labāk pārvaldāmiem CSS stiliem.
Šajā amatā mēs aplūkosim LESS, kas ir bijis viens no populārākajiem CSS priekšapstrādātājiem, kā arī plaši izmantots daudzās front-end sistēmās, piemēram, Bootstrap. Mēs arī ejam cauri pamata komunālie pakalpojumi, rīki un iestatījumi, lai palīdzētu jums darboties ar LESS.
Kompilators
Vispirms mums būs jāizveido kompilators. LESS sintakse ir nestandarta, katrai W3C specifikācijai. Pārlūkprogramma nevarēs apstrādāt un padarīt produkciju, neskatoties uz CSS līdzīgām iezīmēm.
Šeit ir redzams LESS kods:
@ krāsu bāze: # 2d5e8b; .class1 fona krāsa: @ krāsu bāze; .class2 fona krāsa: #fff; krāsa: @ krāsu bāze;
Kompilators apstrādās kodu un ieslēdz LESS sintaksi pārlūkprogrammu saderīgā CSS formātā:
.class1 fona krāsa: # 2d5e8b; .class1 .class2 fona krāsa: #fff; krāsa: # 2d5e8b;
CSS apkopošanai ir vairāki rīki:
JavaScript lietošana
LESS nāk ar a less.js failu, kas ir ļoti viegli izvietojams jūsu vietnē. Izveidojiet stilu ar .mazāk un pievienojiet to savam dokumentam, izmantojot rel = "stilu lapa / mazāk" atribūts.
Jūs varat iegūt JS failu šeit, lejupielādēt to, izmantojot Bower paketes pārvaldnieku, citādi tieši saistot ar CDN, piemēram:
Jūs visi esat iestatījuši un var veidot stilus .mazāk. LESS sintakse tiks apkopota uz lidmašīnas kā lapas ielādes. Paturiet to prātā izmantojot JavaScript, ražošanas stadijā netiek dota cerība, jo tas būtiski ietekmēs vietnes veiktspēju.
Jums vienmēr ir jāsagatavo LESS sintakse un tikai tā apkalpot regulāru CSS tā vietā. Tu vari izmantot Terminal, Task Runner patīk Grunt vai Gulp, vai grafiskais pieteikums.
Izmantojot CLI
LESS nodrošina vietējo komandrindas interfeisu (CLI), mazāk, kas apstrādā vairākus uzdevumus, ne tikai apkopojot LESS sintaksi. Izmantojot CLI, varam kodēt kodus, saspiest failus un izveidot avota karti. Komanda ir balstīta uz Node.js, kas efektīvi ļauj komandai strādāt Windows, OS X un Linux.
Pārliecinieties, vai Node.js ir instalēts (citādi piesaistiet instalētāju), tad instalējiet LESS CLI, izmantojot NPM (mezglu pakotnes pārvaldnieks), izmantojot šādu komandrindu.
npm instalējiet -g mazāk
Tagad jums ir mazāk jūsu rīcībā esošā komanda, lai apkopotu LESS uz CSS:
lessc style.less style.css
Task Runner izmantošana
Uzdevumu skrējējs ir rīks, kas automatizē attīstības uzdevumus un darbplūsmas. Nevis palaist mazāk komandu katru reizi, kad mēs vēlamies apkopot mūsu kodus, mēs varam iestatīt instalēt uzdevumu skrējēju un iestatīt to, lai skatītu izmaiņas mūsu LESS failos un nekavējoties apkopotu LESS uz CSS.
Divi populāri rīki šajā kategorijā ir Grunt un Gulp. Mums ir virkne ziņu, kas aptver šos rīkus. Pārbaudiet ziņas, lai uzzinātu, kā šos rīkus izmantot savā darbplūsmā.
- Kā izmantot Grunt, lai automatizētu savu darbplūsmu
- Darba sākšana ar Gulp.js
- Izveidot skriptu kaujas: Gulp Vs Grunt
Izmantojot grafisko lietojumu
Tiem, kas, iespējams, nav pieraduši izmantot terminālu un komandrindas, var izvēlēties grafisko interfeisu. Šobrīd ir daudz pieteikumu, lai apkopotu LESS šodien visām platformām - dažas bezmaksas, dažas ir samaksātas
Šeit ir pilns saraksts:
| App | Platforma | Izmaksas |
| Maisījums | OS X / Windows | Bezmaksas |
| Koala | OS X / Windows / Linux | Bezmaksas |
| Prepros | OS X / Windows | Freemium (USD29) |
| WinLESS | Windows | Bezmaksas |
| CodeKit | OS X | USD32 |
Kurš kompilators, kuru izvēlaties (neņemot vērā JavaScript), patiesībā nav svarīgi, kamēr rīks darbojas un papildina jūsu darbplūsmu..
Kodu redaktors
Varat izmantot jebkuru kodu redaktoru. Vienkārši instalējiet spraudni vai paplašinājumu, lai izceltu LESS sintaksi ar atbilstošām krāsām, kas tagad ir pieejama gandrīz visiem kodu redaktoriem un IDE, ieskaitot SublimeText, Notepad ++, VisualStudio, TextMate un Eclipse, lai nosauktu dažus.
Tagad, kad mums ir viss kompilators un koda redaktors, mēs varam sākt rakstīt CSS stilus ar LESS sintaksi.
LESS Sintakse
Atšķirībā no parastās CSS, kā mēs to zinām, LESS darbojas daudz vairāk kā programmēšanas valoda. Tas ir dinamisks, tāpēc sagaida, ka atradīsiet dažas terminoloģijas Mainīgie, Darbība un Darbības joma paceļam.
Mainīgie
Pirmkārt, apskatīsim Mainīgie.
Ja esat strādājis diezgan ilgi ar CSS, jūs, iespējams, esat rakstījuši kaut ko līdzīgu, kur mums ir atkārtotas vērtības, kas deklarācijas blokos ir piešķirtas visā stillapā.
.class1 fona krāsa: # 2d5e8b; .class2 fona krāsa: #fff; krāsa: # 2d5e8b; .class3 border: 1px solid # 2d5e8b;
Šī prakse patiešām ir laba - līdz brīdim, kad mums būs jāpārslaida vairāk nekā tūkstoši vai vairāk līdzīgu fragmentu visā stilu. Tas varētu notikt, veidojot liela mēroga tīmekļa vietni. Darbs kļūs garlaicīgs.
Ja mēs izmantojam tādu CSS priekšapstrādātāju kā LESS, iepriekš minētais gadījums nebūtu problēma - mēs varam izmantot Mainīgie. Mainīgie lielumi ļaus mums saglabāt konstante vērtību, ko vēlāk var izmantot atkārtoti visā stillapā.
@ krāsu bāze: # 2d5e8b; .class1 fona krāsa: @ krāsu bāze; .class2 fona krāsa: #fff; krāsa: @ krāsu bāze; .class3 border: 1px solid @ color-base;
Iepriekš minētajā piemērā mēs saglabājam krāsu # 2d5e8b iekš @ krāsu bāze mainīgais. Ja vēlaties mainīt krāsu, mums ir jāmaina tikai šī mainīgā vērtība.
Izņemot krāsu, mainīgajos lielumos var ievietot arī citas vērtības, piemēram:
@ font-family: Gruzija @ dot-border: dotted @transition: lineāra @ kapacitāte: 0.5
Mixins
LESS, mēs varam izmantot Mixins atkārtoti izmantot visas deklarācijas CSS noteikumā, kas noteikts citā noteikumā. Šeit ir piemērs:
.gradienti fons: #eaeaea; fons: lineārs gradients (augšā, #eaeaea, #cccccc); fons: -o-lineārs gradients (augšā, #eaeaea, #cccccc); fons: -ms-lineārs gradients (augšā, #eaeaea, #cccccc); fons: -moz-lineārs gradients (augšā, #eaeaea, #cccccc); fons: -webkit-lineārs gradients (augšā, #eaeaea, #cccccc);
Iepriekšējā fragmentā mēs esam iestatījuši noklusējuma iestatījumu slīpums krāsa iekšpusē .slīpumi klasē. Kad mēs vēlamies pievienot slīpumus, mēs vienkārši ievietojam .slīpumi šādā veidā:
div .gradients; robeža: 1px cietais # 555; robežu rādiuss: 3px;
The .lodziņā mantos visu deklarācijas bloku .slīpumi. Tātad iepriekšminētais CSS noteikums ir vienāds ar šādu vienkāršo CSS:
div background: #eaeaea; fons: lineārs gradients (augšā, #eaeaea, #cccccc); fons: -o-lineārs gradients (augšā, #eaeaea, #cccccc); fons: -ms-lineārs gradients (augšā, #eaeaea, #cccccc); fons: -moz-lineārs gradients (augšā, #eaeaea, #cccccc); fons: -webkit-lineārs gradients (augšā, #eaeaea, #cccccc); robeža: 1px cietais # 555; robežu rādiuss: 3px;
Turklāt, ja izmantojat CSS3 savā tīmekļa vietnē, varat izmantot LESS Elements, lai padarītu savu darbu daudz vieglāku. LESS Elements ir kopīga kolekcija CSS3 Mixins mēs bieži varam izmantot stilu lapās, piemēram, robežu rādiuss, slīpumi, piliens ēna un tā tālāk.
Lai izmantotu LESS elementus, vienkārši pievienojiet @import regulējiet savu LESS stilu, bet neaizmirstiet to vispirms lejupielādēt un pievienot savā darba direktorijā.
@import "elements.less";
Tagad mēs varam atkārtoti izmantot visu klases no elementi, piemēram, lai pievienotu 3px robežu rādiuss līdz a div, mēs varam rakstīt:
div .rounded (3px);
Turpmākai lietošanai skatiet oficiālo dokumentāciju.
Iekļautie noteikumi
Kad rakstāt stilus vienkāršā CSS, jūs, iespējams, esat nonācis arī caur šīm tipiskajām kodu struktūrām.
nav augstums: 40px; platums: 100%; fons: # 455868; robežu apakšā: 2px ciets # 283744; nav li platums: 600px; augstums: 40px; nav li a krāsa: #fff; līnijas augstums: 40px; teksta ēna: 1px 1px 0px # 283744;
Vienkāršā CSS, mēs izvēlamies bērna elementus, vispirms katru vecāku atlasot katrā noteikumā, kas ir ievērojami lieks, ja mēs sekojam “labākā pieredze” princips.
LESS CSS sistēmā mēs varam vienkāršot noteikumu kopu bērnu elementu ligzdošana vecāku vidū, sekojoši;
nav augstums: 40px; platums: 100%; fons: # 455868; robežu apakšā: 2px ciets # 283744; li platums: 600px; augstums: 40px; a krāsa: #fff; līnijas augstums: 40px; teksta ēna: 1px 1px 0px # 283744;
Varat arī piešķirt pseido klases, patīk : lidināties, ar selektoru, izmantojot simbolu un (un).
Pieņemsim, ka mēs vēlamies pievienot : lidināties uz iepriekš norādīto enkura atzīmi, mēs to varam rakstīt šādi:
a krāsa: #fff; līnijas augstums: 40px; teksta ēna: 1px 1px 0px # 283744; & hover fona krāsa: # 000; krāsa: #fff;
Darbība
Mēs varam veikt arī operācijas LESS, piemēram, pievienošana, atņemšana, reizināšana un dalīšana stilu lapā esošajiem numuriem, krāsām un mainīgajiem.
Pieņemsim, ka mēs vēlamies, lai elements B būtu divas reizes lielāks par A elementu. Tādā gadījumā mēs to varam rakstīt šādi:
@ augstums: 100px .elements-A augstums: @ augstums; .elements-B augstums: @ augstums * 2;
Kā redzams iepriekš, mēs vispirms saglabājam vērtību @ augstums mainiet vērtību, tad piešķiriet vērtību elementam A.
B elementā, nevis paša augstuma aprēķinā, mēs varam reizināt augstumu ar 2 izmantojot zvaigznītes operatoru (*). Tagad, kad mēs mainām vērtību @ augstums mainīgais, elements B vienmēr būs divreiz augstāks.
Iepazīstieties ar uzlabotākajiem darbības piemēriem mūsu iepriekšējā apmācībā: Slick Menu navigācijas joslas izstrāde.
Darbības joma
LESS piemēro Darbības joma jēdziens, kur mainīgie lielumi tiks iedzimti vispirms no vietējā mēroga, un, ja tie nav pieejami lokāli, tas meklēs plašākā apjomā.
header @color: black; fona krāsa: @ krāsa; nav @color: blue; fona krāsa: @ krāsa; a krāsa: @ krāsa;
Iepriekš minētajā piemērā galvenes ir melns fona krāsa, bet navfona krāsa būs zils tā kā vietējā mērogā ir @color mainīgais, kamēr a būs arī zils, kas ir mantojis no tuvākā vecāka, nav.
Galīgā doma
Galu galā mēs ceram, ka šis ieraksts var sniegt jums pamatzināšanas par to, kā mēs varam labāk rakstīt CSS, izmantojot LESS. Sākumā jūs varbūt jūtaties mazliet neērti, bet, mēģinot to biežāk, tas noteikti kļūs daudz vieglāk.
Šeit ir pāris pamācības, kuras es aicinu jūs izpētīt papildu padomus un praksi, kas var palīdzēt jūsu LESS prasmes virzīt uz nākamo līmeni.
- LESS CSS apmācība: Slick Menu navigācijas joslas izstrāde
- Izpratne LESS Color Functions
- 3 Jaunas LESS CSS funkcijas, kas jums jāzina
