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.
Mibnija b'INQAS
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.
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.
Varjabbli Bootstrap Il-varjabbli LESS, il-valuri tagħhom, u l-linji gwida għall-użu
Hyperlinks
@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
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
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
@primaryButtonBackground |
@linkColor |
Formoli
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Formola stati u twissijiet
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Mixins Bootstrap
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.
- .element {element {
- . clearfix ();
- }
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.
- .element {element {
- . fruntiera - raġġ ( 4px );
- }
Ż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: 5px, @width: 5px |
Issettja malajr l-għoli u l-wisa 'fuq linja waħda |
.square() |
@size: 5px |
Tibni fuq .size()biex tissettja l-wisa 'u l-għoli bħala l-istess valur |
.opacity() |
@opacity: 100 |
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 preċenti b'n kolonni u x % kanal wiesa' |
Proprjetajiet CSS3
| Mixin | Parametri | Użu |
|---|---|---|
.border-radius() |
@radius: 5px |
Dawwar il-kantunieri ta 'element. Jista' jkun valur wieħed jew erba' valuri separati mill-ispazju |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Ż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: 0, @y: 0 |
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 |
.resizable() |
@direction: both |
Agħmel kwalunkwe element imqassam fuq il-lemin u l-qiegħ |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Agħmel il-kontenut ta 'kwalunkwe element juża kolonni CSS3 |
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 |
Il-kumpilazzjoni ta' Bootstrap b'INQAS
Għodda għall-kumpilazzjoni
Node ma makefile
Installa l-kompilatur tal-linja tal-kmand LESS u uglify-js globalment b'npm billi tħaddem il-kmand li ġej:
$ npm install -g inqas ikrah-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 ./lib/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 .