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.

Zašto MANJE?

Bootstrap je napravljen sa LESS-om 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.

Nauči više

Posjetite službenu web stranicu na http://lesscss.org/ da saznate više.

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. Množite, dijelite, sabirajte i oduzimajte svoj put do CSS razuma.

Skele i veze

`@bodyBackground`	`@white`	Boja pozadine stranice
`@textColor`	`@grayDark`	Zadana boja teksta za cijelo tijelo, naslove i još mnogo toga
`@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

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monako, "Courier New", monospace
`@baseFontSize`	13px	Mora biti piksela
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Mora biti piksela
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Stolovi

`@tableBackground`	`transparent`
`@tableBackgroundAccent`	`#f9f9f9`
`@tableBackgroundHover`	`#f5f5f5`
`@tableBorder`	`ddd`

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

`@btnBackground`	`@white`
`@btnBackgroundHighlight`	`darken(@white, 10%)`
`@btnBorder`	`darken(@white, 20%)`
`@btnPrimaryBackground`	`@linkColor`
`@btnPrimaryBackgroundHighlight`	`spin(@btnPrimaryBackground, 15%)`
`@btnInfoBackground`	`#5bc0de`
`@btnInfoBackgroundHighlight`	`#2f96b4`
`@btnSuccessBackground`	`#62c462`
`@btnSuccessBackgroundHighlight`	`51a351`
`@btnWarningBackground`	`lighten(@orange, 15%)`
`@btnWarningBackgroundHighlight`	`@orange`
`@btnDangerBackground`	`#ee5f5b`
`@btnDangerBackgroundHighlight`	`#bd362f`
`@btnInverseBackground`	`@gray`
`@btnInverseBackgroundHighlight`	`@grayDarker`

Forms

`@placeholderText`	`@grayLight`
`@inputBackground`	`@white`
`@inputBorder`	`#ccc`
`@inputBorderRadius`	`3px`
`@inputDisabledBackground`	`@grayLighter`
`@formActionsBackground`	`#f5f5f5`

Stanja obrazaca i upozorenja

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

Navbar

`@navbarHeight`	40px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`
`@navbarLinkColorActive`	`@navbarLinkColorHover`
`@navbarLinkBackgroundHover`	`transparent`
`@navbarLinkBackgroundActive`	`@navbarBackground`
`@navbarSearchBackground`	`lighten(@navbarBackground, 25%)`
`@navbarSearchBackgroundFocus`	`@white`
`@navbarSearchBorder`	`darken(@navbarSearchBackground, 30%)`
`@navbarSearchPlaceholderColor`	`#ccc`
`@navbarBrandColor`	`@navbarLinkColor`

Padajući meni

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`

Jedinica heroja

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

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ću`margin: auto`
`.ie7-inline-block()`	nijedan	Koristite pored redovnog `display: inline-block`da dobijete podršku za IE7
`.size()`	`@height @width`	Brzo postavite visinu i širinu na jednu liniju
`.square()`	`@size`	Nadovezuje se `.size()`na postavljanje širine i visine kao iste vrijednosti
`.opacity()`	`@opacity`	Postavite, cijelim brojevima, postotak neprozirnosti (npr. "50" ili "75")

Forms

Mixin	Parametri	Upotreba
`.placeholder()`	`@color: @placeholderText`	Postavite `placeholder`boju teksta za unos

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	Napravite horizontalno centriran kontejner za držanje vašeg sadržaja
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Generirajte sistem piksela mreže (kontejner, red i kolone) s n kolona i x žlijeb širine piksela
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Generirajte postojeći sistem mreže sa n kolona i x % širokim olukom
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Generirajte sistem piksela mreže za `input`elemente, uzimajući u obzir padding i granice
`.makeColumn`	`@columns: 1, @offset: 0`	Pretvorite bilo koji `div`u kolonu mreže bez `.span*`klasa

CSS3 svojstva

Mixin	Parametri	Upotreba
`.border-radius()`	`@radius`	Zaokružite uglove elementa. Može biti jedna vrijednost ili četiri vrijednosti razdvojene razmakom
`.box-shadow()`	`@shadow`	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 njegovu originalnu veličinu
`.translate()`	`@x, @y`	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-box`za punu širinu `input`)
`.user-select()`	`@select`	Kontrolirajte odabir teksta kursora na stranici
`.backface-visibility()`	`@visibility: visible`	Spriječite treperenje sadržaja kada koristite CSS 3D transformacije
`.resizable()`	`@direction: both`	Neka bilo koji element može promijeniti veličinu na desnoj i donjoj strani
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	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

Napomena: Ako šaljete zahtjev za povlačenje na GitHub s modificiranim CSS-om, morate ponovo kompajlirati CSS putem bilo kojeg od ovih metoda.

Alati za kompajliranje

Čvor sa makefileom

Instalirajte kompajler LESS komandne linije i uglify-js globalno pomoću npm-a tako što ćete pokrenuti sljedeću naredbu:

$ npm install -g manje uglify-js

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 ./less/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 sprema 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.

Izgrađen sa MANJE

Zašto MANJE?

Šta je uključeno?

Nauči više

Varijable

Mixins

Operacije

Bootstrap varijable LESS varijable, njihove vrijednosti i smjernice za korištenje

Skele i veze

Mrežni sistem

Tipografija

Stolovi

Boje u nijansama sive

Akcentne boje

Komponente

Dugmad

Forms

Stanja obrazaca i upozorenja

Navbar

Padajući meni

Jedinica heroja

Bootstrap mixins

O miksinama

Basic mixins

Parametric mixins

Lako dodajte svoje

Uključeni mixins

Komunalne usluge

Forms

Tipografija

Mrežni sistem

CSS3 svojstva

Pozadine i gradijenti

Prevođenje Bootstrapa sa LESS

Alati za kompajliranje

Čvor sa makefileom

Komandna linija

Javascript

Nezvanična Mac aplikacija

Više Mac aplikacija

Krckanje

CodeKit

Jednostavno