Uża LESS ma Bootstrap

Ippersonalizza u estendi Bootstrap b'LESS , preproċessur CSS, biex tieħu vantaġġ mill-varjabbli, mixins, u aktar użati biex tibni CSS ta 'Bootstrap.

Għaliex INQAS?

Bootstrap huwa magħmul b'INQAS fil-qalba tiegħu, lingwa ta 'stylesheet dinamika maħluqa mill-ħabib tajjeb tagħna, Alexis Sellier . Jagħmel l-iżvilupp tas-CSS ibbażat fuq is-sistemi aktar mgħaġġel, eħfef u aktar divertenti.

X'inhu inkluż?

Bħala estensjoni ta 'CSS, LESS jinkludi varjabbli, mixins għal siltiet ta' kodiċi li jistgħu jerġgħu jintużaw, operazzjonijiet għal matematika sempliċi, nesting, u anke funzjonijiet tal-kulur.

Itagħllem iżjed

INQAS CSS

Żur il-websajt uffiċjali fuq http://lesscss.org/ biex titgħallem aktar.

Varjabbli

Il-ġestjoni tal-kuluri u l-valuri tal-pixel fis-CSS tista 'tkun daqsxejn ta' uġigħ, ġeneralment mimlija b'kopja u pejst. Mhux b'INQAS għalkemm—assenja kuluri jew valuri tal-pixel bħala varjabbli u ibdelhom darba.

Mixins

Dawk it-tliet dikjarazzjonijiet tar-raġġ tal-fruntiera li għandek bżonn tagħmel fis-CSS regolari? Issa qed jinżlu għal linja waħda bl-għajnuna ta 'mixins, siltiet ta' kodiċi li tista 'terġa' tuża kullimkien.

Operazzjonijiet

Agħmel il-grid tiegħek, it-tmexxija, u aktar super flessibbli billi tagħmel il-matematika fuq il-fly bl-operazzjonijiet. Immoltiplika, jaqsam, żid, u naqqas it-triq tiegħek lejn is-sanità CSS.

Armar u links

@bodyBackground @white Kulur fl-isfond tal-paġna
@textColor @grayDark Kulur tat-test default għall-ġisem kollu, l-intestaturi, u aktar
@linkColor #08c Kulur tat-test tal-link default
@linkColorHover darken(@linkColor, 15%) Kulur predefinit tat-test tal-link

Sistema tal-grilja

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

Tipografija

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monako, "Courier New", monospace
@baseFontSize 13px Għandhom ikunu pixels
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Għandhom ikunu pixels
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Tabelli

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

Kuluri fuq skala griża

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

Kuluri aċċent

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

Komponenti

Buttuni

@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

Formoli

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

Formola stati u twissijiet

@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

Unità eroj

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Dwar mixins

Mixins bażiċi

Mixin bażiku huwa essenzjalment include jew parzjali għal siltiet ta 'CSS. Jinkitbu bħal klassi CSS u jistgħu jissejħu kullimkien.

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

Mixins parametriċi

Mixin parametriku huwa bħal mixin bażiku, iżda jaċċetta wkoll parametri (għalhekk l-isem) b'valuri default fakultattivi.

  1. . element {
  2. . fruntiera - raġġ ( 4px );
  3. }

Żid faċilment tiegħek

Kważi l-mixins kollha ta' Bootstrap huma maħżuna f'mixins.less, fajl .less ta' utilità mill-isbaħ li jippermettilek tuża mixin fi kwalunkwe fajl .less fl-għodda.

Allura, aqbad u uża dawk eżistenti jew tħossok liberu li żżid tiegħek kif għandek bżonn.

Mixins inklużi

Utilitajiet

Mixin Parametri Użu
.clearfix() xejn Żid ma 'kwalunkwe ġenitur biex tneħħi sufruni ġewwa
.tab-focus() xejn Applika l-istil tal-fokus tal-Webkit u l-kontorn tond ta' Firefox
.center-block() xejn Auto center element blokk-livell bl-użumargin: auto
.ie7-inline-block() xejn Uża minbarra regolari display: inline-blockbiex tikseb appoġġ IE7
.size() @height @width Issettja malajr l-għoli u l-wisa 'fuq linja waħda
.square() @size Tibni fuq .size()biex tissettja l-wisa 'u l-għoli bħala l-istess valur
.opacity() @opacity Issettja, f'numri sħaħ, il-perċentwal tal-opaċità (eż., "50" jew "75")

Formoli

Mixin Parametri Użu
.placeholder() @color: @placeholderText Issettja l- placeholderkulur tat-test għall-inputs

Tipografija

Mixin Parametri Użu
#font > #family > .serif() xejn Agħmel element juża munzell ta 'font serif
#font > #family > .sans-serif() xejn Agħmel element juża munzell ta 'font sans-serif
#font > #family > .monospace() xejn Agħmel element juża munzell ta 'font monospace
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Issettja faċilment id-daqs tat-tipa, il-piż, u t-tmexxija
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Issettja l-familja tat-tipa għal serif, u tikkontrolla d-daqs, il-piż, u t-tmexxija
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Issettja l-familja tat-tipa għal sans-serif, u tikkontrolla d-daqs, il-piż u l-mexxejja
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Issettja l-familja tat-tipa għal monospace, u tikkontrolla d-daqs, il-piż u l-mexxejja

Sistema tal-grilja

Mixin Parametri Użu
.container-fixed() xejn Oħloq kontenitur iċċentrat orizzontalment biex iżżomm il-kontenut tiegħek
#grid > .core() @gridColumnWidth, @gridGutterWidth Iġġenera sistema ta' grilja tal-pixels (kontenitur, ringiela u kolonni) b'kolonni n u kanal wiesa' x pixel
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Iġġenera sistema ta' grilja perċentwali b'n kolonni u x % kanal wiesa'
#grid > .input() @gridColumnWidth, @gridGutterWidth Iġġenera s-sistema tal-grilja tal-pixels għall- inputelementi, li tagħti kont tal-ikkuttunar u l-fruntieri
.makeColumn @columns: 1, @offset: 0 Dawwar kwalunkwe divġo kolonna tal-grilja mingħajr il- .span*klassijiet

Proprjetajiet CSS3

Mixin Parametri Użu
.border-radius() @radius Dawwar il-kantunieri ta 'element. Jista' jkun valur wieħed jew erba' valuri separati mill-ispazju
.box-shadow() @shadow Żid dell ma' element
.transition() @transition Żid effett ta' transizzjoni CSS3 (eż., all .2s linear)
.rotate() @degrees Dawwar element n gradi
.scale() @ratio Skala element għal n darbiet id-daqs oriġinali tiegħu
.translate() @x, @y Mexxi element fuq il-pjani x u y
.background-clip() @clip Aqsam l-isfond ta' element (utli għal border-radius)
.background-size() @size Ikkontrolla d-daqs tal-immaġini fl-isfond permezz ta 'CSS3
.box-sizing() @boxmodel Ibdel il-mudell tal-kaxxa għal element (eż, border-boxgħal wisa 'sħiħ input)
.user-select() @select Ikkontrolla l-għażla tal-cursor tat-test fuq paġna
.backface-visibility() @visibility: visible Evita t-teptip tal-kontenut meta tuża t-trasformazzjonijiet CSS 3D
.resizable() @direction: both Agħmel kwalunkwe element imqassam fuq il-lemin u l-qiegħ
.content-columns() @columnCount, @columnGap: @gridGutterWidth Agħmel il-kontenut ta 'kwalunkwe element juża kolonni CSS3
.hyphens() @mode: auto CSS3 hyphenation meta tridu (jinkludi word-wrap: break-word)

Sfondi u gradjenti

Mixin Parametri Użu
#translucent > .background() @color: @white, @alpha: 1 Agħti element kulur fl-isfond trasluċidu
#translucent > .border() @color: @white, @alpha: 1 Agħti element kulur tal-fruntiera trasluċidi
#gradient > .vertical() @startColor, @endColor Oħloq gradjent fl-isfond vertikali cross-browser
#gradient > .horizontal() @startColor, @endColor Oħloq gradjent ta' sfond orizzontali cross-browser
#gradient > .directional() @startColor, @endColor, @deg Oħloq gradjent fl-isfond direzzjonali bejn il-browser
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Oħloq gradjent ta 'sfond bi tliet kuluri cross-browser
#gradient > .radial() @innerColor, @outerColor Oħloq gradjent ta 'sfond radjali cross-browser
#gradient > .striped() @color, @angle Oħloq gradjent ta 'sfond strixxat bejn il-browser
#gradientBar() @primaryColor, @secondaryColor Użat għal buttuni biex jassenjaw gradjent u fruntiera kemmxejn aktar skura
Nota: Jekk qed tissottometti talba ta' pull lil GitHub b'CSS modifikat, trid terġa ' tikkompila s-CSS permezz ta' kwalunkwe minn dawn il-metodi.

Għodda għall-kumpilazzjoni

Node ma makefile

Installa l-kompilatur tal-linja tal-kmand LESS, JSHint, Recess, u uglify-js globalment b'npm billi tħaddem il-kmand li ġej:

$ npm install -g inqas jshint recess uglify-js

Ladarba tkun installata għadek biss makemill-għerq tad-direttorju tal-bootstrap tiegħek u tkun lest.

Barra minn hekk, jekk għandek watchr installat, tista' taħdem make watchbiex il-bootstrap jinbena mill-ġdid awtomatikament kull darba li teditja fajl fil-bootstrap lib (dan mhux meħtieġ, metodu ta' konvenjenza biss).

Linja tal-kmand

Installa l-għodda tal-linja tal-kmand LESS permezz ta' Node u mexxi l-kmand li ġej:

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

Kun żgur li tinkludi --compressf'dak il-kmand jekk qed tipprova tiffranka xi bytes!

Javascript

Niżżel l-aħħar Less.js u inkludi t-triq għaliha (u Bootstrap) fil- <head>.

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

Biex tikkompila mill-ġdid il-fajls .less, issalvahom u erġa' tagħbija l-paġna tiegħek. Less.js jiġborhom u jaħżenhom f'ħażna lokali.

App mhux uffiċjali tal-Mac

L-app mhux uffiċjali tal-Mac tara direttorji ta' fajls .less u tiġbor il-kodiċi għal fajls lokali wara kull salvataġġ ta' fajl .less osservat.

Jekk tixtieq, tista' taqleb il-preferenzi fl-app għal minifikazzjoni awtomatika u f'liema direttorju jispiċċaw il-fajls ikkumpilati.

Aktar Mac apps

Crunch

Crunch huwa editur u kompilatur LESS li jidher tajjeb ħafna mibni fuq Adobe Air.

CodeKit

Maħluq mill-istess raġel bħall-app Mac mhux uffiċjali, CodeKit hija app Mac li tiġbor LESS, SASS, Stylus, u CoffeeScript.

Sempliċi

App Mac, Linux, u PC għall-kumpilazzjoni tad-drag and drop ta’ fajls LESS. Barra minn hekk, il- kodiċi tas-sors jinsab fuq GitHub .