Korištenje LESS sa Bootstrapom
Prilagodite i proširite Bootstrap sa LESS , CSS pretprocesorom, kako biste iskoristili prednosti varijabli, miksina i još mnogo toga što se koristi za izgradnju Bootstrap-ovog CSS-a.
Izgrađen sa MANJE
Zašto MANJE?
Bootstrap je napravljen sa LESS u svojoj srži, dinamičkim stilskim jezikom koji je kreirao naš dobar prijatelj, Alexis Sellier . To čini razvoj sistemskog CSS-a bržim, lakšim i zabavnijim.
Šta je uključeno?
Kao proširenje CSS-a, LESS uključuje varijable, miksine za višekratnu upotrebu isječaka koda, operacije za jednostavnu matematiku, ugniježđenje, pa čak i funkcije boja.
Varijable
Upravljanje bojama i vrijednostima piksela u CSS-u može biti malo muka, obično puno kopiranja i lijepljenja. Ali ne sa LESS – dodijelite boje ili vrijednosti piksela kao varijable i promijenite ih jednom.
Mixins
One tri deklaracije radijusa granice koje trebate napraviti u običnom starom CSS-u? Sada su svedeni na jedan red uz pomoć miksina, isječaka koda koje možete ponovo koristiti bilo gdje.
Operacije
Učinite svoju mrežu, vodeći i super fleksibilnijim tako što ćete raditi matematiku u hodu s operacijama. Umnožite, podijelite, dodajte i oduzmite svoj put do CSS razuma.
Bootstrap varijable LESS varijable, njihove vrijednosti i smjernice za korištenje
Hiperveze
@linkColor |
#08c | Zadana boja teksta linka | |
@linkColorHover |
darken(@linkColor, 15%) |
Zadana boja teksta linka |
Mrežni sistem
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6,382978723% |
@fluidGridGutterWidth |
2,127659574% |
Tipografija
@baseFontSize |
13px | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18px |
Boje u nijansama sive
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
Akcentne boje
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Komponente
Dugmad
@primaryButtonBackground |
@linkColor |
Forms
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Stanja obrazaca i upozorenja
@warningText |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Bootstrap mixins
O miksinama
Basic mixins
Osnovni mixin je u suštini uključen ili parcijalni isječak CSS-a. Napisane su baš kao CSS klasa i mogu se pozvati bilo gdje.
- . element {
- . clearfix ();
- }
Parametric mixins
Parametarski miksin je kao osnovni miksin, ali takođe prihvata parametre (otuda i ime) sa opcionim podrazumevanim vrednostima.
- . element {
- . granica - radijus ( 4px );
- }
Lako dodajte svoje
Skoro svi Bootstrap-ovi miksini su pohranjeni u mixins.less, divnom uslužnom .less fajlu koji vam omogućava da koristite mixin u bilo kojem od .less fajlova u kompletu alata.
Dakle, samo naprijed i koristite postojeće ili slobodno dodajte svoje prema potrebi.
Uključeni mixins
Komunalne usluge
| Mixin | Parametri | Upotreba |
|---|---|---|
.clearfix() |
nijedan | Dodajte bilo kojem roditelju za brisanje plutajućih unutar |
.tab-focus() |
nijedan | Primijenite Webkit stil fokusa i zaokružite Firefox obris |
.center-block() |
nijedan | Automatsko centriranje elementa na nivou bloka pomoćumargin: auto |
.ie7-inline-block() |
nijedan | Koristite pored redovnog display: inline-blockda dobijete podršku za IE7 |
.size() |
@height: 5px, @width: 5px |
Brzo postavite visinu i širinu na jednu liniju |
.square() |
@size: 5px |
Nadovezuje se .size()na postavljanje širine i visine kao iste vrijednosti |
.opacity() |
@opacity: 100 |
Postavite, cijelim brojevima, postotak neprozirnosti (npr. "50" ili "75") |
Forms
| Mixin | Parametri | Upotreba |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Postavite placeholderboju teksta za unose |
Tipografija
| Mixin | Parametri | Upotreba |
|---|---|---|
#font > #family > .serif() |
nijedan | Neka element koristi niz serifnih fontova |
#font > #family > .sans-serif() |
nijedan | Neka element koristi font bez serifa |
#font > #family > .monospace() |
nijedan | Neka element koristi monospace font |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Lako podesite veličinu fonta, težinu i vođstvo |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Postavite familiju fontova na serif i kontrolirajte veličinu, težinu i vođstvo |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Postavite familiju fontova na sans-serif i kontrolirajte veličinu, težinu i vođstvo |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Postavite familiju fontova na monospace i kontrolirajte veličinu, težinu i vođstvo |
Mrežni sistem
| Mixin | Parametri | Upotreba |
|---|---|---|
.container-fixed() |
nijedan | Obezbedite kontejner fiksne širine (postavljen sa @siteWidth) za čuvanje vašeg sadržaja |
.columns() |
@columns: 1 |
Napravite kolonu mreže koja se proteže na bilo koji broj kolona (zadano na 1 stupac) |
.offset() |
@columns: 1 |
Pomaknite kolonu mreže s lijevom marginom koja se proteže na bilo koji broj stupaca |
.gridColumn() |
nijedan | Neka element lebdi kao rešetkasta kolona |
CSS3 svojstva
| Mixin | Parametri | Upotreba |
|---|---|---|
.border-radius() |
@radius: 5px |
Zaokružite uglove elementa. Može biti jedna vrijednost ili četiri vrijednosti razdvojene razmakom |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Dodajte sjenku elementu |
.transition() |
@transition |
Dodajte CSS3 efekt tranzicije (npr. all .2s linear) |
.rotate() |
@degrees |
Rotirajte element za n stepeni |
.scale() |
@ratio |
Skalirajte element na n puta njegove originalne veličine |
.translate() |
@x: 0, @y: 0 |
Pomjerite element na x i y ravnima |
.background-clip() |
@clip |
Izrežite pozadinu elementa (korisno za border-radius) |
.background-size() |
@size |
Kontrolirajte veličinu pozadinskih slika putem CSS3 |
.box-sizing() |
@boxmodel |
Promijenite model kutije za element (npr. border-boxza punu širinu input) |
.user-select() |
@select |
Kontrolirajte odabir teksta kursora na stranici |
.resizable() |
@direction: both |
Neka bilo koji element može promijeniti veličinu na desnoj i donjoj strani |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Neka sadržaj bilo kojeg elementa koristi CSS3 stupce |
Pozadine i gradijenti
| Mixin | Parametri | Upotreba |
|---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
Dajte elementu prozirnu boju pozadine |
.#translucent > .border() |
@color: @white, @alpha: 1 |
Dajte elementu prozirnu boju obruba |
.#gradient > .vertical() |
@startColor, @endColor |
Napravite vertikalni gradijent pozadine za više pretraživača |
.#gradient > .horizontal() |
@startColor, @endColor |
Kreirajte horizontalni gradijent pozadine za više pretraživača |
.#gradient > .directional() |
@startColor, @endColor, @deg |
Kreirajte pozadinski gradijent usmjerenog u više pretraživača |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Kreirajte pozadinski gradijent u tri boje za više pregledača |
.#gradient > .radial() |
@innerColor, @outerColor |
Kreirajte radijalni gradijent pozadine za više pretraživača |
.#gradient > .striped() |
@color, @angle |
Kreirajte prugasti gradijent pozadine za više pretraživača |
.#gradientBar() |
@primaryColor, @secondaryColor |
Koristi se za dugmad za dodeljivanje gradijenta i malo tamnije granice |
Prevođenje Bootstrapa sa LESS
Alati za kompajliranje
Čvor sa makefileom
Instalirajte LESS kompajler komandne linije sa npm-om tako što ćete pokrenuti sljedeću naredbu:
$ npm instalirajte manje
Jednom instaliran samo pokrenite makeiz korijena vašeg bootstrap direktorija i sve je spremno.
Dodatno, ako imate instaliran watchr , možete pokrenuti make watchda se bootstrap automatski rekonstruiše svaki put kada uređujete datoteku u bootstrap biblioteci (ovo nije potrebno, samo pogodna metoda).
Komandna linija
Instalirajte alat LESS komandne linije preko Node i pokrenite sljedeću naredbu:
$ lessc ./lib/bootstrap.less > bootstrap.css
Obavezno uključite --compresstu naredbu ako pokušavate sačuvati neke bajtove!
Javascript
Preuzmite najnoviji Less.js i uključite putanju do njega (i Bootstrap) u <head>.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Da ponovo kompajlirate .less fajlove, samo ih sačuvajte i ponovo učitajte svoju stranicu. Less.js ih kompajlira i pohranjuje u lokalnu pohranu.
Nezvanična Mac aplikacija
Neslužbena Mac aplikacija prati direktorije .less datoteka i kompajlira kod u lokalne datoteke nakon svakog spremanja gledanog .less datoteke.
Ako želite, možete uključiti postavke u aplikaciji za automatsko minimiziranje i u kojem direktoriju završavaju kompajlirani fajlovi.
Više Mac aplikacija
Krckanje
Crunch je sjajan LESS editor i kompajler izgrađen na Adobe Air-u.
CodeKit
Napravljen od strane istog tipa kao i nezvaničnu Mac aplikaciju, CodeKit je Mac aplikacija koja kompajlira LESS, SASS, Stylus i CoffeeScript.
Jednostavno
Mac, Linux i PC aplikacija za drag and drop kompajliranje MANJE datoteka. Osim toga, izvorni kod je na GitHubu .