MANJI CSS - Vodič za početnike
CSS Pre-procesor je sada postao glavna osobina u razvoju weba. On isporučuje običan CSS s osobinama programiranja kao što su varijable, funkcije ili mixin i operacije koje omogućuju graditeljima web-stranica modularni, skalabilni i upravljiviji CSS stilovi.
U ovom postu, pogledat ćemo LESS koji je bio jedan od najpopularnijih CSS predprocesora, a također je bio široko rasprostranjen u brojnim front-end okvirima kao što je Bootstrap. Također ćemo proći kroz osnovni uslužni programi, alati i postavke koji će vam pomoći da se podignete i pokrenete pomoću LESS-a.
Kompajler
Za početak, morat ćemo postaviti kompilator. LESS sintaksa je nestandardna po W3C specifikaciji. Preglednik ne bi mogao obraditi i prikazati izlaz, unatoč nasljeđivanju osobina sličnih CSS-u.
Evo kratkog prikaza LESS koda:
@ color-base: # 2d5e8b; .class1 pozadinska boja: @ boja-baza; .class2 pozadinska boja: #fff; boja: @ boja-baza;
Kompajler će obraditi kôd i pretvoriti LESS sintaksu u CSS format sukladan pregledniku:
.class1 pozadinska boja: # 2d5e8b; .class1 .class2 background-color: #fff; boja: # 2d5e8b;
Postoji niz alata za kompiliranje CSS-a:
Korištenje JavaScripta
MANJE dolazi s less.js datoteku koja je stvarno jednostavna za implementaciju na web-lokaciji. Stvorite stilsku tablicu s .manje i povežite ga u dokument pomoću rel = "stilova / manje" atribut.
Ovdje možete dobiti JS datoteku, preuzeti je preko Bower upravitelja paketa, inače izravno povezati s CDN-om, ovako:
Svi ste postavljeni i možete sastaviti stilove unutar .manje. Sintaksa LESS bit će sastavljena u letu dok se stranica učitava. Imajte na umu to korištenje JavaScript-a se obeshrabruje u fazi proizvodnje jer će to loše utjecati na izvedbu web-lokacije.
Uvijek morate kompajlirati LESS sintaksu unaprijed i samo posluživati redoviti CSS umjesto toga. Možeš koristiti Terminal, trkač za zadaće Roktati ili Gutljaj, ili grafički program za to.
Korištenje CLI
LESS pruža izvorno sučelje komandne linije (CLI), lessc, koja obrađuje nekoliko zadataka izvan samo kompiliranja LESS sintakse. Koristeći CLI možemo ispisivati kodove, komprimirati datoteke i kreirati izvornu mapu. Naredba se temelji na Node.js koja učinkovito dopušta naredbi da radi u Windowsima, OS X i Linuxu.
Provjerite je li instaliran Node.js (inače ovdje preuzmite instalacijski program), a zatim instalirajte LESS CLI kroz NPM (Upravitelj paketa čvorova) pomoću sljedećeg retka naredbe.
npm instalirajte -g manje
Sada imate lessc naredbu na raspolaganju za kompilaciju LESS u CSS:
lessc style.less style.css
Koristeći trkač zadataka
Task runner je alat koji automatizira razvojne zadatke i radne procese. Umjesto pokretanja lessc naredbe svaki put kad bismo htjeli sastaviti naše kodove, možemo postaviti instalaciju runnera zadataka i postaviti ga da gleda promjene u našim LESS datotekama i odmah kompilira LESS u CSS.
Dva popularna alata u ovoj kategoriji danas su Grunt i Gulp. Imamo niz postova koji pokrivaju ove alate. Provjerite postove da biste saznali kako implementirati te alate u tijek rada.
- Kako koristiti Grunt automatizirati vaš tijek rada
- Početak rada s Gulp.js
- Bitka za gradnju Skripte: Gulp Vs Grunt
Korištenje grafičke aplikacije
Za one koji možda nisu navikli koristiti terminale i naredbene linije, umjesto toga mogu se odlučiti za grafičko sučelje. Postoji mnoštvo aplikacija za kompilaciju LESS-a danas za sve platforme - neke besplatne, neke plaćene
Evo kompletnog popisa:
| Aplikacija | Platforma | cijena |
| Smjesa | OS X / Windows | Besplatno |
| Koala | OS X / Windows / Linux | Besplatno |
| Prepros | OS X / Windows | Freemium (29 USD) |
| winless | Windows | Besplatno |
| CodeKit | OS X | USD32 |
Za koji se kompajler odlučite (osim JavaScripta) zapravo nije važno, iskreno, sve dok alat radi i nadopunjuje vaš radni tijek, upotrijebite ga.
Uređivač koda
Možete koristiti bilo koji uređivač koda. Jednostavno instalirajte dodatak ili proširenje kako biste istaknuli LESS sintaksu s odgovarajućim bojama, što je značajka koja je sada dostupna za gotovo sve uređivače koda i IDE-ove, uključujući SublimeText, Notepad ++, VisualStudio, TextMate i Eclipse..
Sada kada smo postavili kompajler i uređivač koda, možemo početi pisati CSS stilove s LESS sintaksom.
LESS Sintaksa
Za razliku od običnog CSS-a kakvog poznajemo, LESS radi mnogo više kao programski jezik. To je dinamično, stoga očekujte da ćete naći neke terminologije poput Varijable, operacija i djelokrug Putem.
Varijable
Prije svega, pogledajmo Varijable.
Ako ste radili neko vrijeme s CSS-om, vjerojatno ste napisali nešto poput ovoga, gdje imamo ponavljajuće vrijednosti dodijeljene u blokovima deklaracije u cijeloj stilskoj tablici..
.class1 pozadinska boja: # 2d5e8b; .class2 background-color: #fff; boja: # 2d5e8b; .class3 border: 1px solid # 2d5e8b;
Ta je praksa zapravo dobra - dok ne nađemo da moramo prosijati više od toga tisuću ili više sličnih isječaka u cijeloj stilskoj tablici. To bi se moglo dogoditi prilikom izgradnje velike web stranice. Rad će postati dosadan.
Ako koristimo CSS pre-procesor poput LESS-a, primjer iznad ne bi bio problem - možemo ga koristiti Varijable. Varijable će nam omogućiti pohranu konstanta vrijednost koja se kasnije može ponovno upotrijebiti u cijeloj tablici stilova.
@ color-base: # 2d5e8b; .class1 pozadinska boja: @ boja-baza; .class2 background-color: #fff; boja: @ boja-baza; .class3 border: 1px solid @ color-base;
U gornjem primjeru pohranjujemo boju # 2d5e8b u 'Boje baza promjenjiva. Kada želite promijeniti boju, samo trebamo promijeniti vrijednost u ovoj varijabli.
Osim boje, u varijable možete staviti i druge vrijednosti kao što su, na primjer:
@ font-family: Georgia @ dot-border: točkasto @ prijelaz: linearno @opacity: 0,5
Mixins
U MANJEM možemo koristiti Mixins za ponovnu upotrebu cijelih deklaracija u CSS skupu pravila u drugom skupu pravila. Evo primjera:
.gradijenti pozadina: #eaeaea; pozadina: linearni gradijent (vrh, #eaeaea, #cccccc); pozadina: -o-linearni gradijent (vrh, #eaeaea, #cccccc); background: -ms-linearni gradijent (vrh, #eaeaea, #cccccc); background: -moz-linearni gradijent (vrh, #eaeaea, #cccccc); background: -webkit-linear-gradient (vrh, #eaeaea, #cccccc);
U gore navedenom isječku unaprijed smo postavili zadanu postavku gradijent boja unutar. \ t .gradijenti klase. Kad god želimo dodati gradijente, jednostavno umetnemo .gradijenti ovuda:
div .gradients; granica: 1px solid # 555; granični polumjer: 3px;
.kutija će naslijediti sve deklaracijske blokove unutar .gradijenti. Dakle, gore navedeno CSS pravilo jednako je sljedećem običnom CSS-u:
div pozadina: #eaeaea; pozadina: linearni gradijent (vrh, #eaeaea, #cccccc); pozadina: -o-linearni gradijent (vrh, #eaeaea, #cccccc); background: -ms-linearni gradijent (vrh, #eaeaea, #cccccc); background: -moz-linearni gradijent (vrh, #eaeaea, #cccccc); background: -webkit-linear-gradient (vrh, #eaeaea, #cccccc); granica: 1px solid # 555; granični polumjer: 3px;
Nadalje, ako koristite CSS3 puno na svojoj web stranici, možete koristiti MANJE elemente kako bi vaš posao bio mnogo lakši. LESS Elements je skup uobičajenih CSS3 Mixins koje često koristimo u stilskim listovima, kao što je granica-radijus, gradijenti, drop-sjena i tako dalje.
Da biste koristili MANJE elemente, jednostavno dodajte @uvoz pravilo u svom LESS stilskom listu, ali ne zaboravite ga najprije preuzeti i dodati u vaš radni direktorij.
@import "elements.less";
Sada možemo ponovno koristiti sve klase pružaju iz elements.less, na primjer, za dodavanje 3px radijus do a div, možemo pisati:
div .rounded (3px);
Za daljnju uporabu, molimo pogledajte službenu dokumentaciju.
Ugrađena pravila
Kada pišete stilove u običnom CSS-u, možda ste došli i kroz te tipične strukture koda.
nav visina: 40px; širina: 100%; pozadina: # 455868; obrub-dno: 2px čvrsto # 283744; nav li širina: 600px; visina: 40px; nav li a color: #fff; visina linije: 40px; tekst-sjena: 1px 1px 0px # 283744;
U običnom CSS-u odabiremo podređene elemente tako da prvo ciljamo roditelja u svakom skupu pravila, što je znatno suvišno ako slijedimo “najbolje prakse” načelo.
U MANJI CSS možemo pojednostaviti skup pravila gniježdenje podređenih elemenata unutar roditelja, kako slijedi;
nav visina: 40px; širina: 100%; pozadina: # 455868; obrub-dno: 2px solid # 283744; li širina: 600px; visina: 40px; a boja: #fff; visina linije: 40px; tekst-sjena: 1px 1px 0px # 283744;
Također možete dodijeliti pseudo-klase, Kao : hover, na izbornik pomoću znaka & (&).
Recimo da želimo dodati : hover na oznaku sidra iznad, možemo je napisati na sljedeći način:
a boja: #fff; visina linije: 40px; tekst-sjena: 1px 1px 0px # 283744; &: lebdeći background-color: # 000; boja: #fff;
operacija
Također možemo obavljati operacije u MANJIMA, kao što je zbrajanje, oduzimanje, množenje i dijeljenje na brojeve, boje i varijable u slogovima stilova.
Recimo da želimo da je element B dva puta veći od elementa A. U tom slučaju, možemo ga napisati ovako:
@height: 100px .element-A visina: @height; .element-B visina: @height * 2;
Kao što možete vidjeti gore, vrijednost prvo pohranjujemo u @visina varijablu, zatim dodijelite vrijednost elementu A.
U elementu B, umjesto da sami izračunamo visinu, možemo pomnožiti visinu za 2 pomoću operatora zvjezdice (*). Sada, kad god promijenimo vrijednost u @visina varijabla, element B uvijek će imati dvostruku visinu.
Pogledajte više naprednih primjera iz prethodnog vodiča: Dizajniranje klizne trake za navigaciju izbornika.
djelokrug
MANJE primjenjuje djelokrug koncept, gdje će varijable biti naslijeđene prvo iz lokalnog opsega, a kada to nije lokalno, pretražit će širi opseg.
header @color: crna; boja pozadine: @ boja; nav @color: plava; boja pozadine: @ boja; a boja: @ boja;
U gornjem primjeru, Zaglavlje ima crno boja pozadine, ali navBoja pozadine bit će plava jer ima varijablu @color u svom lokalnom opsegu, dok je također će imati plavo koje je naslijeđeno od svog bližeg roditelja, nav.
Konačna misao
Na kraju, nadamo se da vam ovaj post može pružiti osnovno razumijevanje o tome kako možemo napisati CSS na bolji način koristeći LESS. Možda se isprva osjećate malo nespretno, ali dok ga češće isprobavate, sigurno će vam biti puno lakše.
Evo nekoliko tutorijala koje vas potičem da potražite dodatne savjete i postupke, koji mogu pomoći potaknuti vašu LESS vještinu na sljedeću razinu.
- MANJE CSS Tutorial: Izrada Slick Izbornik Navigacija Bar
- Razumijevanje funkcija boje LESS
- 3 Novi manje CSS značajke koje bi trebali znati
