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.
Byggd med MINDRE
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.
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.
Bootstrap-variabler LESS variabler, deras värden och riktlinjer för användning
Hyperlänkar
@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
@baseFontSize |
13 px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
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
@primaryButtonBackground |
@linkColor |
Blanketter
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Formulär tillstånd och varningar
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Bootstrap mixins
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 avmargin: auto |
.ie7-inline-block() |
ingen | Använd utöver vanliga display: inline-blockför att få IE7-stöd |
.size() |
@height: 5px, @width: 5px |
Ställ snabbt in höjd och bredd på en rad |
.square() |
@size: 5px |
Bygger på .size()för att ställa in bredd och höjd som samma värde |
.opacity() |
@opacity: 100 |
Ange, i heltal, opacitetsprocenten (t.ex. "50" eller "75") |
Blanketter
| Blanda i | Parametrar | Användande |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Ställ in placeholdertextfä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 aktuellt rutsystem med n kolumner och x % bred ränna |
CSS3-egenskaper
| Blanda i | Parametrar | Användande |
|---|---|---|
.border-radius() |
@radius: 5px |
Runda hörnen på ett element. Kan vara ett enskilt värde eller fyra mellanslagsseparerade värden |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
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: 0, @y: 0 |
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-boxför en full bredd input) |
.user-select() |
@select |
Styr markörval av text på en sida |
.resizable() |
@direction: both |
Gör vilket element som helst som kan ändras till höger och längst ned |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Använd CSS3-kolumner för innehållet i ett element |
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 |
Kompilera Bootstrap med LESS
Verktyg för att kompilera
Nod med makefile
Installera kommandoradskompilatorn LESS och uglify-js globalt med npm genom att köra följande kommando:
$ npm installera -g mindre 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 ./lib/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.
Fler Mac-appar
Knastrande
Crunch är en snygg mindre redigerare och kompilator byggd på Adobe Air.
CodeKit
Skapat av samma kille som den inofficiella Mac-appen, CodeKit är en Mac-app som kompilerar LESS, SASS, Stylus och CoffeeScript.
Enkelt
Mac-, Linux- och PC-app för att dra och släppa kompilering av MINDRE filer. Dessutom finns källkoden på GitHub .