Använder LESS med Bootstrap

Anpassa och utöka Bootstrap med LESS , en CSS-förprocessor, för att dra fördel av variablerna, mixinerna och mer som används för att bygga Bootstraps CSS.

Varför MINDRE?

Bootstrap är gjord med LESS som kärna, ett dynamiskt stilmallsspråk skapat av vår gode vän, Alexis Sellier . Det gör att utveckla systembaserad CSS snabbare, enklare och roligare.

Vad ingår?

Som en förlängning av CSS innehåller LESS variabler, mixins för återanvändbara kodavsnitt, operationer för enkel matematik, kapsling och till och med färgfunktioner.

Läs mer

Besök den officiella webbplatsen på http://lesscss.org/ för att lära dig mer.

Variabler

Att hantera färger och pixelvärden i CSS kan vara lite jobbigt, vanligtvis fullt av kopiera och klistra in. Inte med LESS dock – tilldela färger eller pixelvärden som variabler och ändra dem en gång.

Mixins

De där tre gränsradiedeklarationerna du behöver göra i vanlig CSS? Nu är de nere på en rad med hjälp av mixins, kodbitar som du kan återanvända var som helst.

Operationer

Gör ditt rutnät, ledande och mer superflexibelt genom att göra matematiken i farten med operationer. Multiplicera, dividera, addera och subtrahera dig till CSS-sinne.

Ställningar och länkar

`@bodyBackground`	`@white`	Sidans bakgrundsfärg
`@textColor`	`@grayDark`	Standardtextfärg för hela texten, rubriker och mer
`@linkColor`	`#08c`	Standardfärg för länktext
`@linkColorHover`	`darken(@linkColor, 15%)`	Standardfärg för svävande länktext

Rutsystem

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

Typografi

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier New", monospace
`@baseFontSize`	13 px	Måste vara pixlar
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Måste vara pixlar
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tabeller

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

Gråskala färger

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

Accentfärger

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

Komponenter

Knappar

`@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`

Blanketter

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

Formulär tillstånd och varningar

`@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`

Dropdowns

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

Hjälteenhet

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

Om mixins

Grundläggande blandningar

En grundläggande mixin är i huvudsak en inkludering eller en del av ett utdrag av CSS. De är skrivna precis som en CSS-klass och kan kallas var som helst.

. element {
  . clearfix ();
}

Parametriska blandningar

En parametrisk mixin är precis som en grundläggande mixin, men den accepterar också parametrar (därav namnet) med valfria standardvärden.

. element {
  . border - radie ( 4px );
}

Lägg enkelt till din egen

Nästan alla Bootstraps mixin är lagrade i mixins.less, en underbar .less-fil som gör att du kan använda en mixin i någon av .less-filerna i verktygslådan.

Så fortsätt och använd de befintliga eller lägg gärna till dina egna efter behov.

Blandningar ingår

Verktyg

Blanda i	Parametrar	Användande
`.clearfix()`	ingen	Lägg till någon förälder för att rensa flytningar inom
`.tab-focus()`	ingen	Använd Webkit-fokusstilen och en rund Firefox-kontur
`.center-block()`	ingen	Autocentrera ett element på blocknivå med hjälp av`margin: auto`
`.ie7-inline-block()`	ingen	Använd utöver vanliga `display: inline-block`för att få IE7-stöd
`.size()`	`@height @width`	Ställ snabbt in höjd och bredd på en rad
`.square()`	`@size`	Bygger på `.size()`för att ställa in bredd och höjd som samma värde
`.opacity()`	`@opacity`	Ange, i heltal, opacitetsprocenten (t.ex. "50" eller "75")

Blanketter

Blanda i	Parametrar	Användande
`.placeholder()`	`@color: @placeholderText`	Ställ in `placeholder`textfärgen för inmatningar

Typografi

Blanda i	Parametrar	Användande
`#font > #family > .serif()`	ingen	Få ett element att använda en serif-fontstack
`#font > #family > .sans-serif()`	ingen	Gör ett element med en sans-serif-fontstack
`#font > #family > .monospace()`	ingen	Få ett element att använda en monospace-fontstack
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ställ enkelt in teckensnittsstorlek, vikt och led
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ställ in teckensnittsfamiljen på serif och kontrollera storlek, vikt och led
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ställ in teckensnittsfamiljen till sans-serif och kontrollera storlek, vikt och led
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ställ in teckensnittsfamiljen på monospace och kontrollera storlek, vikt och ledande

Rutsystem

Blanda i	Parametrar	Användande
`.container-fixed()`	ingen	Skapa en horisontellt centrerad behållare för att hålla ditt innehåll
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Skapa ett pixelrutnätssystem (behållare, rad och kolumner) med n kolumner och x pixel bred rännsten
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Skapa ett procentuellt rutsystem med n kolumner och x % bred ränna
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Generera pixelrutnätssystemet för `input`element, ta hänsyn till utfyllnad och gränser
`.makeColumn`	`@columns: 1, @offset: 0`	Förvandla någon `div`till en rutnätskolumn utan `.span*`klasserna

CSS3-egenskaper

Blanda i	Parametrar	Användande
`.border-radius()`	`@radius`	Runda hörnen på ett element. Kan vara ett enskilt värde eller fyra mellanslagsseparerade värden
`.box-shadow()`	`@shadow`	Lägg till en skugga till ett element
`.transition()`	`@transition`	Lägg till CSS3-övergångseffekt (t.ex. `all .2s linear`)
`.rotate()`	`@degrees`	Rotera ett element n grader
`.scale()`	`@ratio`	Skala ett element till n gånger dess ursprungliga storlek
`.translate()`	`@x, @y`	Flytta ett element på x- och y-planen
`.background-clip()`	`@clip`	Beskär bakgrunden för ett element (användbart för `border-radius`)
`.background-size()`	`@size`	Styr storleken på bakgrundsbilder via CSS3
`.box-sizing()`	`@boxmodel`	Ändra boxmodellen för ett element (t.ex. `border-box`för en full bredd `input`)
`.user-select()`	`@select`	Styr markörval av text på en sida
`.backface-visibility()`	`@visibility: visible`	Förhindra flimmer av innehåll när du använder CSS 3D-transformeringar
`.resizable()`	`@direction: both`	Gör vilket element som helst som kan ändras till höger och längst ned
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Använd CSS3-kolumner för innehållet i ett element
`.hyphens()`	`@mode: auto`	CSS3-avstavning när du vill ha det (inkluderar `word-wrap: break-word`)

Bakgrunder och gradienter

Blanda i	Parametrar	Användande
`#translucent > .background()`	`@color: @white, @alpha: 1`	Ge ett element en genomskinlig bakgrundsfärg
`#translucent > .border()`	`@color: @white, @alpha: 1`	Ge ett element en genomskinlig kantfärg
`#gradient > .vertical()`	`@startColor, @endColor`	Skapa en vertikal bakgrundsgradient för flera webbläsare
`#gradient > .horizontal()`	`@startColor, @endColor`	Skapa en horisontell bakgrundsgradient för flera webbläsare
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Skapa en riktningsbaserad bakgrundsgradient för flera webbläsare
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Skapa en bakgrundsgradient i tre färger för flera webbläsare
`#gradient > .radial()`	`@innerColor, @outerColor`	Skapa en radiell bakgrundsgradient för flera webbläsare
`#gradient > .striped()`	`@color, @angle`	Skapa en randig bakgrundsgradient för flera webbläsare
`#gradientBar()`	`@primaryColor, @secondaryColor`	Används för knappar för att tilldela en gradient och något mörkare ram

Obs: Om du skickar en pull-begäran till GitHub med modifierad CSS, måste du kompilera om CSS via någon av dessa metoder.

Verktyg för att kompilera

Nod med makefile

Installera kommandoradskompilatorn LESS, JSHint, Recess och uglify-js globalt med npm genom att köra följande kommando:

$ npm installera -g mindre jshint fördjupning uglify-js

När det är installerat, kör bara makefrån roten av din bootstrap-katalog och du är klar.

Dessutom, om du har watchr installerat, kan du köra make watchför att få bootstrap automatiskt ombyggd varje gång du redigerar en fil i bootstrap lib (detta är inte nödvändigt, bara en bekvämlighetsmetod).

Kommandorad

Installera kommandoradsverktyget LESS via Node och kör följande kommando:

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

Se till att inkludera --compressi det kommandot om du försöker spara några bytes!

Javascript

Ladda ner den senaste Less.js och inkludera sökvägen till den (och Bootstrap) i <head>.

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

För att kompilera om .less-filerna, spara bara dem och ladda om din sida. Less.js kompilerar dem och lagrar dem i lokal lagring.

Inofficiell Mac-app

Den inofficiella Mac-appen tittar på kataloger med .less-filer och kompilerar koden till lokala filer efter varje lagring av en bevakad .less-fil.

Om du vill kan du växla inställningar i appen för automatisk minifiering och i vilken katalog de kompilerade filerna hamnar.

Byggd med MINDRE

Varför MINDRE?

Vad ingår?

Läs mer

Variabler

Mixins

Operationer

Bootstrap-variabler LESS variabler, deras värden och riktlinjer för användning

Ställningar och länkar

Rutsystem

Typografi

Tabeller

Gråskala färger

Accentfärger

Komponenter

Knappar

Blanketter

Formulär tillstånd och varningar

Navbar

Dropdowns

Hjälteenhet

Bootstrap mixins

Om mixins

Grundläggande blandningar

Parametriska blandningar

Lägg enkelt till din egen

Blandningar ingår

Verktyg

Blanketter

Typografi

Rutsystem

CSS3-egenskaper

Bakgrunder och gradienter

Kompilera Bootstrap med LESS

Verktyg för att kompilera

Nod med makefile

Kommandorad

Javascript

Inofficiell Mac-app

Fler Mac-appar

Knastrande

CodeKit

Enkelt