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

MANJE CSS-a

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.

Skele i karike

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

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

Stolovi

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

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

@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

Obrasci

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

Formirajte stanja i upozorenja

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

Navigacijska traka

@navbarHeight 40 px
@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će liste

@dropdownBackground @white
@dropdownBorder rgba(0,0,0,.2)
@dropdownLinkColor @grayDark
@dropdownLinkColorHover @white
@dropdownLinkBackgroundHover @linkColor
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

Jedinica heroja

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

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.

  1. . element {
  2. . clearfix ();
  3. }

Parametarski miksini

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

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

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ćumargin: auto
.ie7-inline-block() nikakav Upotrijebite uz redovnu display: inline-blockda biste dobili podršku za IE7
.size() @height @width Brzo postavite visinu i širinu na jednoj liniji
.square() @size Nadovezuje se na .size()postavljanje širine i visine kao iste vrijednosti
.opacity() @opacity Postavite, u cijelim brojevima, postotak neprozirnosti (npr. "50" ili "75")

Obrasci

Mixin Parametri Korištenje
.placeholder() @color: @placeholderText Postavite placeholderboju 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 postotne mreže s n stupaca i x % širokim međuprostorom
#grid > .input() @gridColumnWidth, @gridGutterWidth Generirajte sustav pikselske mreže za inputelemente, uzimajući u obzir ispunu i obrube
.makeColumn @columns: 1, @offset: 0 Pretvorite bilo koji divu stupac mreže bez .span*klasa

CSS3 svojstva

Mixin Parametri Korištenje
.border-radius() @radius Zaokružite uglove elementa. Može biti jedna vrijednost ili četiri vrijednosti odvojene razmakom
.box-shadow() @shadow 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, @y 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-boxza punu širinu input)
.user-select() @select Kontrola odabira kursora teksta na stranici
.backface-visibility() @visibility: visible Spriječite treperenje sadržaja pri korištenju CSS 3D transformacija
.resizable() @direction: both Neka bilo koji element može mijenjati veličinu s desne i donje strane
.content-columns() @columnCount, @columnGap: @gridGutterWidth Neka sadržaj bilo kojeg elementa koristi CSS3 stupce
.hyphens() @mode: auto CSS3 rastavljanje crtica kada to želite (uključuje word-wrap: break-word)

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, JSHint, Recess i uglify-js globalno s npm-om pokretanjem sljedeće naredbe:

$ npm install -g less jshint recess 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 ./less/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.

Više Mac aplikacija

Škripanje

Crunch je izvrstan LESS uređivač i kompajler izgrađen na Adobe Airu.

CodeKit

Stvorio ga je isti čovjek kao i neslužbenu Mac aplikaciju, CodeKit je Mac aplikacija koja kompilira LESS, SASS, Stylus i CoffeeScript.

Jednostavno

Mac, Linux i PC aplikacija za povlačenje i ispuštanje datoteka LESS. Osim toga, izvorni kod je na GitHubu .