LESS brûke mei Bootstrap

Oanpasse en útwreidzje Bootstrap mei LESS , in CSS-preprocessor, om te profitearjen fan de fariabelen, mixins en mear brûkt om de CSS fan Bootstrap te bouwen.

Wêrom MINDER?

Bootstrap is makke mei LESS yn har kearn, in dynamyske stylblêdtaal makke troch ús goede freon, Alexis Sellier . It makket it ûntwikkeljen fan systemen-basearre CSS rapper, makliker en leuker.

Wat is ynbegrepen?

As útwreiding fan CSS omfettet LESS fariabelen, mixins foar werbrûkbere snippets fan koade, operaasjes foar ienfâldige wiskunde, nesting, en sels kleurfunksjes.

Lear mear

MINDER CSS

Besykje de offisjele webside op http://lesscss.org/ om mear te learen.

Fariabelen

It behearen fan kleuren en pikselwearden yn CSS kin in bytsje pynlik wêze, meast fol mei kopiearje en plakke. Net mei LESS lykwols - tawize kleuren as pikselwearden as fariabelen en feroarje se ien kear.

Mixins

Dy trije grins-radius deklaraasjes moatte jo meitsje yn reguliere ol 'CSS? No binne se op ien rigel del mei help fan mixins, snippets fan koade dy't jo oeral kinne opnij brûke.

Operations

Meitsje jo raster, liedend en mear fleksibel troch de wiskunde op 'e flecht te dwaan mei operaasjes. Fermannichfâldigje, diele, tafoegje en subtractearje jo wei nei CSS-sanity.

Steigers en keppelings

@bodyBackground @white Side eftergrûn kleur
@textColor @grayDark Standert tekstkleur foar it hiele lichem, kopteksten en mear
@linkColor #08c Standert keppeling tekst kleur
@linkColorHover darken(@linkColor, 15%) Standert keppeling tekst hover kleur

Grid systeem

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6.382978723%
@fluidGridGutterWidth 2.127659574%

Typografy

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

Tabellen

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

Greyscale kleuren

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

Aksintkleuren

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

Components

Knoppen

@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

Formulieren

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

Formearje steaten en warskôgings

@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

Held ienheid

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Oer mixins

Basic mixins

In basismixin is yn essinsje in ynklusyf of in diel foar in snippet fan CSS. Se binne krekt skreaun as in CSS-klasse en kinne oeral neamd wurde.

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

Parametric mixins

In parametryske mixin is krekt as in basismixin, mar it akseptearret ek parameters (dêrfandinne de namme) mei opsjonele standertwearden.

  1. . elemint {
  2. . grins - radius ( 4px );
  3. }

Foegje jo eigen maklik ta

Hast alle Bootstrap's mixins wurde opslein yn mixins.less, in prachtich .less-bestân dat jo in mixin kin brûke yn ien fan 'e .less-bestannen yn 'e toolkit.

Dus, gean fierder en brûk de besteande of fiel jo frij om jo eigen ta te foegjen as jo nedich binne.

Ynbegrepen mixins

Utilities

Mixin Parameters Gebrûk
.clearfix() gjin Foegje oan elke âlder ta om driuwers binnen te wiskjen
.tab-focus() gjin Tapasse de Webkit-fokusstyl en rûne Firefox-omtrek
.center-block() gjin Auto sintrum in blok-nivo elemint mei help fanmargin: auto
.ie7-inline-block() gjin Brûk neist reguliere display: inline-blockom IE7-stipe te krijen
.size() @height @width Set fluch de hichte en breedte op ien rigel
.square() @size Bout op .size()om de breedte en hichte as deselde wearde yn te stellen
.opacity() @opacity Stel, yn folsleine getallen, it opaciteitspersintaazje yn (bygelyks "50" of "75")

Formulieren

Mixin Parameters Gebrûk
.placeholder() @color: @placeholderText Stel de placeholdertekstkleur yn foar ynfier

Typografy

Mixin Parameters Gebrûk
#font > #family > .serif() gjin Meitsje in elemint mei in serif-lettertypestapel
#font > #family > .sans-serif() gjin Meitsje in elemint mei in sans-serif-lettertypestapel
#font > #family > .monospace() gjin Meitsje in elemint mei in monospace lettertypestapel
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Stel lettertypegrutte, gewicht en liedend maklik yn
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Stel lettertypefamylje yn op serif, en kontrolearje grutte, gewicht en liedend
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Stel lettertypefamylje yn op sans-serif, en kontrolearje grutte, gewicht en liedend
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Stel lettertypefamylje yn op monospace, en kontrolearje grutte, gewicht en liedend

Grid systeem

Mixin Parameters Gebrûk
.container-fixed() gjin Meitsje in horizontaal sintraal kontener foar it hâlden fan jo ynhâld
#grid > .core() @gridColumnWidth, @gridGutterWidth Generearje in pikselrastersysteem (kontainer, rigel en kolommen) mei n kolommen en x pikselbrede goot
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Generearje in persintaazje grid systeem mei n kolommen en x % brede gutter
#grid > .input() @gridColumnWidth, @gridGutterWidth Generearje it pikselrastersysteem foar inputeleminten, rekken hâldend mei padding en grinzen
.makeColumn @columns: 1, @offset: 0 Feroarje elk divyn in rasterkolom sûnder de .span*klassen

CSS3 eigenskippen

Mixin Parameters Gebrûk
.border-radius() @radius Rûn de hoeken fan in elemint. Kin in inkele wearde wêze as fjouwer romte-skieden wearden
.box-shadow() @shadow Foegje in drop shadow ta oan in elemint
.transition() @transition Foegje CSS3-oergongseffekt ta (bgl. all .2s linear)
.rotate() @degrees Rotearje in elemint n graden
.scale() @ratio Skaalje in elemint nei n kear de oarspronklike grutte
.translate() @x, @y Ferpleats in elemint op de x- en y-fleanen
.background-clip() @clip De eftergrûn fan in elemint snije (nuttich foar border-radius)
.background-size() @size Kontrolearje de grutte fan eftergrûnôfbyldings fia CSS3
.box-sizing() @boxmodel Feroarje it fakmodel foar in elemint (bygelyks border-boxfoar in folsleine breedte input)
.user-select() @select Kontrolearje cursor seleksje fan tekst op in side
.backface-visibility() @visibility: visible Foarkom flikkerjen fan ynhâld by it brûken fan CSS 3D-transformaasjes
.resizable() @direction: both Meitsje elk elemint resizable oan de rjochterkant en ûnderkant
.content-columns() @columnCount, @columnGap: @gridGutterWidth Meitsje de ynhâld fan elk elemint mei CSS3-kolommen
.hyphens() @mode: auto CSS3-ôfbreking as jo it wolle (omfettet word-wrap: break-word)

Eftergrûnen en gradiënten

Mixin Parameters Gebrûk
#translucent > .background() @color: @white, @alpha: 1 Jou in elemint in trochsichtige eftergrûnkleur
#translucent > .border() @color: @white, @alpha: 1 Jou in elemint in trochsichtige rânekleur
#gradient > .vertical() @startColor, @endColor Meitsje in cross-browser fertikale eftergrûngradient
#gradient > .horizontal() @startColor, @endColor Meitsje in cross-browser horizontale eftergrûngradient
#gradient > .directional() @startColor, @endColor, @deg Meitsje in cross-browser rjochting eftergrûngradient
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Meitsje in cross-browser eftergrûngradient mei trije kleuren
#gradient > .radial() @innerColor, @outerColor Meitsje in cross-browser radiale eftergrûngradient
#gradient > .striped() @color, @angle Meitsje in cross-browser gestreepte eftergrûngradient
#gradientBar() @primaryColor, @secondaryColor Wurdt brûkt foar knoppen om in gradient en wat donkerdere râne ta te jaan
Opmerking: as jo in pull-fersyk yntsjinje by GitHub mei wizige CSS, moatte jo de CSS opnij kompilearje fia ien fan dizze metoaden.

Tools foar kompilaasje

Node mei makefile

Ynstallearje de LESS kommandorigelkompiler, JSHint, Recess, en uglify-js wrâldwiid mei npm troch it folgjende kommando út te fieren:

$ npm ynstallearje -g minder jshint recess uglify-js

Ienris ynstalleare, rinne gewoan makefan 'e root fan jo bootstrap-map en jo binne allegear ynsteld.

Derneist, as jo watchr ynstalleare hawwe, kinne jo rinne make watchom bootstrap automatysk opnij te meitsjen elke kear as jo in bestân yn 'e bootstrap lib bewurkje (dit is net fereaske, gewoan in gemaksmetoade).

Kommandorigel

Ynstallearje it LESS kommandorigelark fia Node en fier it folgjende kommando út:

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

Wês wis dat --compressjo dit kommando opnimme as jo besykje wat bytes te bewarjen!

Javascript

Download de lêste Less.js en befetsje it paad dernei (en Bootstrap) yn 'e <head>.

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

Om de .less-bestannen opnij te kompilearjen, bewarje se gewoan en laden jo side opnij. Less.js kompilearret se en bewarret se yn lokale opslach.

Unoffisjele Mac-app

De net-offisjele Mac-app besjocht mappen fan .less-bestannen en kompilearret de koade nei lokale bestannen nei elke opslach fan in besjoen .less-bestân.

As jo ​​​​wolle, kinne jo foarkar yn 'e app wikselje foar automatysk minifysjen en yn hokker map de kompilearre bestannen einigje.

Mear Mac-apps

Crunch

Crunch is in geweldige útsjocht LESS bewurker en kompilator boud op Adobe Air.

CodeKit

Makke troch deselde man as de net-offisjele Mac-app, CodeKit is in Mac-app dy't LESS, SASS, Stylus en CoffeeScript kompilearret.

Ienfâldich

Mac-, Linux- en PC-app foar slepen en droppe kompilearjen fan MINDER bestannen. Plus, de boarnekoade is op GitHub .