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

MINDRE CSS

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.

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

Parametriska blandningar

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

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

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 @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 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 procentuellt rutsystem med n kolumner och x % bred ränna
#grid > .input() @gridColumnWidth, @gridGutterWidth Generera pixelrutnätssystemet för inputelement, ta hänsyn till utfyllnad och gränser
.makeColumn @columns: 1, @offset: 0 Förvandla någon divtill 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-boxfö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.

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 .