Korištenje LESS s Bootstrapom

Prilagodite i proširite Bootstrap s LESS -om, CSS predprocesorom, kako biste iskoristili prednosti varijabli, mixina i još mnogo toga što se koristi za izradu Bootstrapovog CSS-a.

Zašto MANJE?

Bootstrap je izrađen s LESS-om u svojoj jezgri, dinamičnim stilskim jezikom koji je stvorio naš dobar prijatelj, Alexis Sellier . Čini razvijanje CSS-a temeljenog na sustavima bržim, lakšim i zabavnijim.

Što je uključeno?

Kao proširenje CSS-a, LESS uključuje varijable, mixins za ponovno upotrebljive isječke koda, operacije za jednostavnu matematiku, gniježđenje, pa čak i funkcije boja.

Saznajte više

Posjetite službenu web stranicu na http://lesscss.org/ kako biste saznali više.

Varijable

Upravljanje bojama i vrijednostima piksela u CSS-u može biti pomalo mučno, obično puno kopiranja i lijepljenja. Ali ne s MANJE — dodijelite boje ili vrijednosti piksela kao varijable i promijenite ih jednom.

Mixins

One tri deklaracije radijusa obruba koje trebate napraviti u običnom starom CSS-u? Sada su svedeni na jedan redak uz pomoć mixina, isječaka koda koje možete ponovno upotrijebiti bilo gdje.

Operacije

Učinite svoju mrežu, vodeći i još više super fleksibilnom radeći matematiku u hodu s operacijama. Množite, dijelite, zbrajajte i oduzimajte svoj put do razumnog CSS-a.

Hiperveze

`@linkColor`	#08c	Zadana boja teksta veze
`@linkColorHover`	`darken(@linkColor, 15%)`	Zadana boja teksta veze

Mrežni sustav

`@gridColumns`	12
`@gridColumnWidth`	60 px
`@gridGutterWidth`	20 px
`@fluidGridColumnWidth`	6,382978723%
`@fluidGridGutterWidth`	2,127659574%

Tipografija

`@baseFontSize`	13px
`@baseFontFamily`	`"Helvetica Neue", Helvetica, Arial, sans-serif`
`@baseLineHeight`	18 px

Boje sivih tonova

`@black`	#000
`@grayDarker`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@grayLighter`	#eee
`@white`	#F F F

Akcentne boje

`@blue`	#049cdb
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

Komponente

Gumbi

`@primaryButtonBackground`	`@linkColor`

Obrasci

`@placeholderText`	`@grayLight`

Navigacijska traka

`@navbarHeight`	40 px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`

Formirajte stanja i upozorenja

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

O miksinima

Osnovni miksini

Osnovni mixin je u biti uključen ili djelomičan za isječak CSS-a. Napisane su kao CSS klasa i mogu se pozvati bilo gdje.

. element {
  . clearfix ();
}

Parametarski miksini

Parametarski mixin je kao i osnovni mixin, ali također prihvaća parametre (otuda i naziv) s neobaveznim zadanim vrijednostima.

. element {
  . granica - radijus ( 4px );
}

Jednostavno dodajte svoje

Gotovo svi Bootstrapovi mixini pohranjeni su u mixins.less, prekrasnoj uslužnoj .less datoteci koja vam omogućuje korištenje mixina u bilo kojoj od .less datoteka u kompletu alata.

Dakle, samo naprijed i koristite postojeće ili slobodno dodajte vlastite prema potrebi.

Uključeni miksini

Komunalije

Mixin	Parametri	Korištenje
`.clearfix()`	nikakav	Dodajte bilo kojem nadređenom elementu da biste izbrisali plutajuće elemente unutar njega
`.tab-focus()`	nikakav	Primijenite Webkit fokus stil i okrugli obris Firefoxa
`.center-block()`	nikakav	Automatsko centriranje elementa na razini bloka pomoću`margin: auto`
`.ie7-inline-block()`	nikakav	Upotrijebite uz redovnu `display: inline-block`da biste dobili podršku za IE7
`.size()`	`@height: 5px, @width: 5px`	Brzo postavite visinu i širinu na jednoj liniji
`.square()`	`@size: 5px`	Nadovezuje se na `.size()`postavljanje širine i visine kao iste vrijednosti
`.opacity()`	`@opacity: 100`	Postavite, u cijelim brojevima, postotak neprozirnosti (npr. "50" ili "75")

Obrasci

Mixin	Parametri	Korištenje
`.placeholder()`	`@color: @placeholderText`	Postavite `placeholder`boju teksta za unose

Tipografija

Mixin	Parametri	Korištenje
`#font > #family > .serif()`	nikakav	Učinite da element koristi niz serifnih fontova
`#font > #family > .sans-serif()`	nikakav	Učinite da element koristi snop fontova sans-serif
`#font > #family > .monospace()`	nikakav	Učinite da element koristi monospace font stog
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Jednostavno postavite veličinu fonta, težinu i početnu stranu
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Postavite obitelj fonta na serif i kontrolirajte veličinu, težinu i početnu stranu
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Postavite obitelj fonta na sans-serif i kontrolirajte veličinu, težinu i početnu stranu
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Postavite obitelj fonta na monospace i kontrolirajte veličinu, težinu i početnu stranu

Mrežni sustav

Mixin	Parametri	Korištenje
`.container-fixed()`	nikakav	Napravite horizontalno centrirani spremnik za držanje vašeg sadržaja
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Generirajte sustav pikselske mreže (spremnik, redak i stupci) s n stupaca i x piksela širokim olukom
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Generirajte sustav trenutne mreže s n stupaca i x % širokim međuprostorom

CSS3 svojstva

Mixin	Parametri	Korištenje
`.border-radius()`	`@radius: 5px`	Zaokružite uglove elementa. Može biti jedna vrijednost ili četiri vrijednosti odvojene razmakom
`.box-shadow()`	`@shadow: 0 1px 3px rgba(0,0,0,.25)`	Dodajte sjenu elementu
`.transition()`	`@transition`	Dodaj CSS3 efekt prijelaza (npr., `all .2s linear`)
`.rotate()`	`@degrees`	Rotirajte element za n stupnjeva
`.scale()`	`@ratio`	Skalirajte element na n puta njegovu izvornu veličinu
`.translate()`	`@x: 0, @y: 0`	Pomaknite element u ravninama x i y
`.background-clip()`	`@clip`	Izrežite pozadinu elementa (korisno za `border-radius`)
`.background-size()`	`@size`	Kontrolirajte veličinu pozadinskih slika putem CSS3
`.box-sizing()`	`@boxmodel`	Promjena modela okvira za element (npr. `border-box`za punu širinu `input`)
`.user-select()`	`@select`	Kontrola odabira kursora teksta na stranici
`.resizable()`	`@direction: both`	Neka bilo koji element može mijenjati veličinu s desne i donje strane
`.content-columns()`	`@columnCount, @columnGap: @gridColumnGutter`	Neka sadržaj bilo kojeg elementa koristi CSS3 stupce

Pozadine i gradijenti

Mixin	Parametri	Korištenje
`#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`	Stvorite vertikalni gradijent pozadine za više preglednika
`#gradient > .horizontal()`	`@startColor, @endColor`	Stvorite horizontalni pozadinski gradijent za više preglednika
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Stvorite usmjereni pozadinski gradijent za više preglednika
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Stvorite gradijent pozadine u tri boje za više preglednika
`#gradient > .radial()`	`@innerColor, @outerColor`	Stvorite radijalni pozadinski gradijent za više preglednika
`#gradient > .striped()`	`@color, @angle`	Stvorite prugasti pozadinski gradijent za više preglednika
`#gradientBar()`	`@primaryColor, @secondaryColor`	Koristi se za gumbe za dodjelu gradijenta i nešto tamnijeg obruba

Napomena: ako GitHubu šaljete zahtjev za povlačenje s izmijenjenim CSS-om, morate ponovno kompajlirati CSS bilo kojom od ovih metoda.

Alati za sastavljanje

Čvor s makefileom

Instalirajte LESS kompilator naredbenog retka i uglify-js globalno s npm-om pokretanjem sljedeće naredbe:

$ npm install -g less uglify-js

Jednom instaliran samo pokrenite makeiz korijena svog bootstrap direktorija i sve je spremno.

Osim toga, ako imate instaliran watchr , možete pokrenuti make watchda se bootstrap automatski ponovno izgradi svaki put kada uređujete datoteku u bootstrap lib (ovo nije potrebno, samo prikladna metoda).

Naredbeni redak

Instalirajte LESS alat naredbenog retka putem Nodea i pokrenite sljedeću naredbu:

$lessc ./lib/bootstrap.less > bootstrap.css

Obavezno uključite --compresstu naredbu ako pokušavate uštedjeti neke bajtove!

Javascript

Preuzmite najnoviji Less.js i uključite put do njega (i Bootstrapa) u <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

Za ponovno kompajliranje .less datoteka, samo ih spremite i ponovno učitajte svoju stranicu. Less.js ih kompajlira i pohranjuje u lokalnu pohranu.

Neslužbena Mac aplikacija

Neslužbena Mac aplikacija prati direktorije .less datoteka i kompajlira kod u lokalne datoteke nakon svakog spremanja promatrane .less datoteke.

Ako želite, možete promijeniti postavke u aplikaciji za automatsko smanjivanje i direktorij u kojem kompajlirane datoteke završavaju.

Izgrađeno s MANJE

Zašto MANJE?

Što je uključeno?

Saznajte više

Varijable

Mixins

Operacije

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

Hiperveze

Mrežni sustav

Tipografija

Boje sivih tonova

Akcentne boje

Komponente

Gumbi

Obrasci

Navigacijska traka

Formirajte stanja i upozorenja

Bootstrap mixins

O miksinima

Osnovni miksini

Parametarski miksini

Jednostavno dodajte svoje

Uključeni miksini

Komunalije

Obrasci

Tipografija

Mrežni sustav

CSS3 svojstva

Pozadine i gradijenti

Kompajliranje Bootstrapa s LESS

Alati za sastavljanje

Čvor s makefileom

Naredbeni redak

Javascript

Neslužbena Mac aplikacija

Više Mac aplikacija

Škripanje

CodeKit

Jednostavno