Folosind LESS cu Bootstrap

Personalizați și extindeți Bootstrap cu LESS , un preprocesor CSS, pentru a profita de variabilele, mixurile și altele folosite pentru a construi CSS-ul Bootstrap.

De ce mai puțin?

Bootstrap este creat cu LESS la bază, un limbaj dinamic pentru foi de stil creat de bunul nostru prieten, Alexis Sellier . Face dezvoltarea CSS bazate pe sisteme mai rapidă, mai ușoară și mai distractivă.

Ce este inclus?

Ca o extensie a CSS, LESS include variabile, mixuri pentru fragmente de cod reutilizabile, operații pentru matematică simplă, imbricare și chiar funcții de culoare.

Află mai multe

MAI MAI CSS

Vizitați site-ul oficial la http://lesscss.org/ pentru a afla mai multe.

Variabile

Gestionarea culorilor și a valorilor pixelilor în CSS poate fi puțin dificilă, de obicei plină de copiere și inserare. Totuși, nu cu LESS — atribuiți culori sau valori de pixeli ca variabile și schimbați-le o dată.

Mixine

Acele trei declarații de rază de frontieră pe care trebuie să le faci în vechiul CSS obișnuit? Acum sunt reduse la o singură linie cu ajutorul mixin-urilor, fragmente de cod pe care le puteți reutiliza oriunde.

Operațiuni

Faceți grila dvs., lider și mai super flexibilă, făcând calculul din mers cu operațiuni. Înmulțiți, împărțiți, adunați și scădeți drumul către sensul CSS.

Schele și legături

@bodyBackground @white Culoarea fundalului paginii
@textColor @grayDark Culoarea implicită a textului pentru întregul corp, titluri și multe altele
@linkColor #08c Culoarea implicită a textului linkului
@linkColorHover darken(@linkColor, 15%) Culoarea implicită a textului linkului

Sistem grilă

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

Tipografie

@sansFontFamily „Helvetica Neue”, Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, „Courier New”, monospace
@baseFontSize 13px Trebuie să fie pixeli
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Trebuie să fie pixeli
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Mese

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

Culori în tonuri de gri

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

Culori de accent

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

Componente

Butoane

@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

Forme

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

Formează stări și alerte

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

Bara de navigare

@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

Mențiuni derulante

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

Unitatea de erou

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Despre mixuri

Mixine de bază

Un mixin de bază este în esență o includere sau o parte parțială pentru un fragment de CSS. Sunt scrise la fel ca o clasă CSS și pot fi apelate oriunde.

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

Mixine parametrice

Un mixin parametric este la fel ca un mixin de bază, dar acceptă și parametri (de unde și numele) cu valori implicite opționale.

  1. . element {
  2. . chenar - raza ( 4px );
  3. }

Adăugați cu ușurință propria dvs

Aproape toate mixurile Bootstrap sunt stocate în mixins.less, un minunat fișier utilitar .less care vă permite să utilizați un mixin în oricare dintre fișierele .less din setul de instrumente.

Deci, mergeți mai departe și folosiți-le pe cele existente sau nu ezitați să le adăugați pe ale dvs. după cum aveți nevoie.

Mixine incluse

Utilități

Mixin Parametrii Utilizare
.clearfix() nici unul Adăugați oricărui părinte pentru a șterge flotoarele din interior
.tab-focus() nici unul Aplicați stilul de focalizare Webkit și conturul Firefox rotund
.center-block() nici unul Centrare automată a unui element la nivel de bloc folosindmargin: auto
.ie7-inline-block() nici unul Utilizați pe lângă cele obișnuite display: inline-blockpentru a obține suport IE7
.size() @height @width Setați rapid înălțimea și lățimea pe o singură linie
.square() @size Se bazează pentru .size()a seta lățimea și înălțimea la aceeași valoare
.opacity() @opacity Setați, în numere întregi, procentul de opacitate (de exemplu, „50” sau „75”)

Forme

Mixin Parametrii Utilizare
.placeholder() @color: @placeholderText Setați placeholderculoarea textului pentru intrări

Tipografie

Mixin Parametrii Utilizare
#font > #family > .serif() nici unul Faceți ca un element să utilizeze o stivă de fonturi serif
#font > #family > .sans-serif() nici unul Faceți ca un element să utilizeze o stivă de fonturi sans-serif
#font > #family > .monospace() nici unul Faceți ca un element să utilizeze o stivă de fonturi monospațiu
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Setați cu ușurință dimensiunea fontului, greutatea și deschiderea
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Setați familia de fonturi la serif și controlați dimensiunea, greutatea și interfața
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Setați familia de fonturi la sans-serif și controlați dimensiunea, greutatea și interfața
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Setați familia de fonturi la monospațiu și controlați dimensiunea, greutatea și interfața

Sistem grilă

Mixin Parametrii Utilizare
.container-fixed() nici unul Creați un container centrat orizontal pentru a vă păstra conținutul
#grid > .core() @gridColumnWidth, @gridGutterWidth Generați un sistem de grilă de pixeli (container, rând și coloane) cu n coloane și jgheab lat de x pixeli
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Generați un sistem de grilă procentuală cu n coloane și x % jgheab lat
#grid > .input() @gridColumnWidth, @gridGutterWidth Generați sistemul de grilă de pixeli pentru inputelemente, ținând cont de umplutură și chenare
.makeColumn @columns: 1, @offset: 0 Transformați orice divîntr-o coloană grilă fără .span*clase

Proprietăți CSS3

Mixin Parametrii Utilizare
.border-radius() @radius Rotunjiți colțurile unui element. Poate fi o singură valoare sau patru valori separate prin spațiu
.box-shadow() @shadow Adăugați o umbră la un element
.transition() @transition Adăugați efect de tranziție CSS3 (de exemplu, all .2s linear)
.rotate() @degrees Rotiți un element cu n grade
.scale() @ratio Scalați un element la de n ori dimensiunea inițială
.translate() @x, @y Mutați un element în planurile x și y
.background-clip() @clip Decupați fundalul unui element (util pentru border-radius)
.background-size() @size Controlați dimensiunea imaginilor de fundal prin CSS3
.box-sizing() @boxmodel Modificați modelul casetei pentru un element (de exemplu, border-boxpentru o lățime completă input)
.user-select() @select Controlați selectarea textului cu cursorul pe o pagină
.backface-visibility() @visibility: visible Preveniți pâlpâirea conținutului atunci când utilizați transformări CSS 3D
.resizable() @direction: both Faceți orice element redimensionabil în dreapta și în jos
.content-columns() @columnCount, @columnGap: @gridGutterWidth Faceți ca conținutul oricărui element să utilizeze coloane CSS3
.hyphens() @mode: auto Secțiunea silabe CSS3 când doriți (include word-wrap: break-word)

Fundaluri și degrade

Mixin Parametrii Utilizare
#translucent > .background() @color: @white, @alpha: 1 Dați unui element o culoare de fundal translucidă
#translucent > .border() @color: @white, @alpha: 1 Dați unui element o culoare translucidă a marginii
#gradient > .vertical() @startColor, @endColor Creați un gradient de fundal vertical pe mai multe browsere
#gradient > .horizontal() @startColor, @endColor Creați un gradient de fundal orizontal între browsere
#gradient > .directional() @startColor, @endColor, @deg Creați un gradient de fundal direcțional între browsere
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Creați un gradient de fundal în trei culori pentru browsere încrucișate
#gradient > .radial() @innerColor, @outerColor Creați un gradient radial de fundal pe mai multe browsere
#gradient > .striped() @color, @angle Creați un gradient de fundal cu dungi pe mai multe browsere
#gradientBar() @primaryColor, @secondaryColor Folosit pentru butoane pentru a atribui un gradient și o margine puțin mai întunecată
Notă: dacă trimiteți o cerere de extragere către GitHub cu CSS modificat, trebuie să recompilați CSS-ul prin oricare dintre aceste metode.

Instrumente pentru compilare

Nod cu makefile

Instalați compilatorul de linie de comandă LESS, JSHint, Recess și uglify-js la nivel global cu npm, rulând următoarea comandă:

$ npm install -g mai puțin jshint recess uglify-js

Odată instalat, doar rulațimake de la rădăcina directorului dvs. de bootstrap și sunteți gata.

În plus, dacă aveți watchr instalat, puteți rula make watchpentru ca bootstrap să fie reconstruit automat de fiecare dată când editați un fișier în lib-ul bootstrap (acest lucru nu este necesar, doar o metodă convenabilă).

Linie de comanda

Instalați instrumentul de linie de comandă LESS prin Node și rulați următoarea comandă:

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

Asigurați-vă că includeți --compressîn acea comandă dacă încercați să salvați câțiva octeți!

Javascript

Descărcați cel mai recent Less.js și includeți calea către acesta (și Bootstrap) în fișierul <head>.

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

Pentru a recompila fișierele .less, salvați-le și reîncărcați pagina. Less.js le compilează și le stochează în stocarea locală.

Aplicație neoficială pentru Mac

Aplicația neoficială pentru Mac urmărește directoarele fișierelor .less și compilează codul în fișiere locale după fiecare salvare a unui fișier .less urmărit.

Dacă doriți, puteți comuta preferințele în aplicație pentru minimizarea automată și în ce director ajung fișierele compilate.

Mai multe aplicații Mac

Crunch

Crunch este un editor și un compilator LESS cu aspect minunat, construit pe Adobe Air.

CodeKit

Creată de același tip ca și aplicația neoficială pentru Mac, CodeKit este o aplicație pentru Mac care comilează LESS, SASS, Stylus și CoffeeScript.

Simplu

Aplicație pentru Mac, Linux și PC pentru compilarea prin glisare și plasare a fișierelor LESS. În plus, codul sursă este pe GitHub .