Ukusebenzisa i-LESS nge-Bootstrap

Enza ngendlela oyifisayo futhi wandise i-Bootstrap nge- LESS , i-preprocessor ye-CSS, ukuze usebenzise okuguquguqukayo, imiksi, nokunye okusetshenziselwa ukwakha i-CSS ye-Bootstrap.

Kungani KUNCANE?

I-Bootstrap yenziwe nge-LESS engqikithini yayo, ulimi lweshidi lesitayela oluguqukayo oludalwe umngane wethu omkhulu, u- Alexis Sellier . Kwenza ukuthuthukiswa kwe-CSS okusekelwe kumasistimu kusheshe, kube lula, futhi kube mnandi kakhulu.

Yini efakiwe?

Njengesandiso se-CSS, i-LESS ihlanganisa okuguquguqukayo, imiksi yamazwibela asebenzisekayo ekhodi, imisebenzi yezibalo ezilula, ukwenza isidleke, kanye nemisebenzi yombala.

Funda kabanzi

Vakashela iwebhusayithi esemthethweni kokuthi http://lesscss.org/ ukuze ufunde kabanzi.

Okuguquguqukayo

Ukuphatha imibala namavelu ephikseli ku-CSS kungaba buhlungu, ngokuvamile kugcwele ukukopisha nokunamathisela. Hhayi nge-LESS nakuba—nika imibala noma amanani amaphikseli njengokuguquguqukayo futhi uwashintshe kanye.

Imiksi

Lezo zimemezelo ezintathu zerediyasi yomngcele okudingeka uzenze ku-CSS evamile? Manje sezansi emugqeni owodwa ngosizo lwama-mixins, amazwibela wekhodi ongaphinda uwasebenzise noma yikuphi.

Imisebenzi

Yenza igridi yakho, ihole, futhi ivumelane nezimo kakhulu ngokwenza izibalo undiza ngokusebenza. Phindaphinda, hlukanisa, engeza, futhi ukhiphe indlela yakho eya ku-CSS sanity.

I-scaffolding nezixhumanisi

`@bodyBackground`	`@white`	Umbala wengemuva wekhasi
`@textColor`	`@grayDark`	Umbala wombhalo ozenzakalelayo wawo wonke umzimba, izihloko, nokuningi
`@linkColor`	`#08c`	Umbala wombhalo wesixhumanisi esizenzakalelayo
`@linkColorHover`	`darken(@linkColor, 15%)`	Umbala wokuhambisa umbhalo wesixhumanisi esizenzakalelayo

Isistimu yegridi

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

Ukuthayipha

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier New", monospace
`@baseFontSize`	13px	Kufanele kube ngamaphikseli
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Kufanele kube ngamaphikseli
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Amathebula

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

Imibala empunga

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

Imibala ye-accent

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

Izingxenye

Izinkinobho

`@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`

Amafomu

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

Izifunda zefomu nezexwayiso

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

Ibha ye-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`

Okwehliswayo

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

Iqembu lamaqhawe

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

Mayelana nama-mixins

Izingxube eziyisisekelo

I-mixin eyisisekelo empeleni ihlanganisa noma ingxenye yamazwibela e-CSS. Zibhalwe njengekilasi le-CSS futhi zingabizwa noma yikuphi.

. isici {
  . clearfix ();
}

Izingxube zeParametric

Ingxube yepharamitha ifana nje ne-mixin eyisisekelo, kodwa futhi yamukela amapharamitha (yingakho igama) elinamanani azenzakalelayo ongawakhetha.

. isici {
  . umngcele - irediyasi ( 4px );
}

Engeza eyakho kalula

Cishe zonke izingxube ze-Bootstrap zigcinwa kuma-mixins.less, insiza emangalisayo .less ifayela elikuvumela ukuthi usebenzise i-mixin kunoma yimaphi amafayela .less kukhithi yamathuluzi.

Ngakho-ke, qhubeka usebenzise ezikhona noma ukhululeke ukungeza ezakho njengoba udinga.

Kufakwe imiksi

Izinsiza

I-Mixin	Amapharamitha	Ukusetshenziswa
`.clearfix()`	akukho	Engeza kunoma yimuphi umzali ukuze usule okuntantayo ngaphakathi
`.tab-focus()`	akukho	Sebenzisa isitayela sokugxila seWebkit kanye nohlaka oluyindilinga lweFirefox
`.center-block()`	akukho	Misa ngokuzenzakalelayo into yezinga lokuvimba usebenzisa`margin: auto`
`.ie7-inline-block()`	akukho	Sebenzisa ngaphezu `display: inline-block`kokujwayelekile ukuze uthole ukwesekwa kwe-IE7
`.size()`	`@height @width`	Setha ngokushesha ubude nobubanzi kulayini owodwa
`.square()`	`@size`	Yakha `.size()`ukuze usethe ububanzi nobude njengevelu efanayo
`.opacity()`	`@opacity`	Setha, izinombolo eziphelele, iphesenti lokufiphala (isb, "50" noma "75")

Amafomu

I-Mixin	Amapharamitha	Ukusetshenziswa
`.placeholder()`	`@color: @placeholderText`	Setha `placeholder`umbala wombhalo wokufakwayo

Ukuthayipha

I-Mixin	Amapharamitha	Ukusetshenziswa
`#font > #family > .serif()`	akukho	Yenza i-elementi sebenzisa isitaki sefonti ye-serif
`#font > #family > .sans-serif()`	akukho	Yenza i-elementi sebenzisa isitaki sefonti ye-sans-serif
`#font > #family > .monospace()`	akukho	Yenza i-elementi usebenzise isitaki sefonti ye-monospace
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Setha kalula usayizi wefonti, isisindo, nokuhola
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Setha umndeni wefonti ku-serif, futhi ulawule usayizi, isisindo, nokuhola
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Setha umndeni wefonti ku-sans-serif, futhi ulawule usayizi, isisindo, nokuhola
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Setha umndeni wefonti ube yi-monospace, futhi ulawule usayizi, isisindo, nokuhola

Isistimu yegridi

I-Mixin	Amapharamitha	Ukusetshenziswa
`.container-fixed()`	akukho	Dala isiqukathi esimaphakathi esivundlile sokubamba okuqukethwe kwakho
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Khiqiza isistimu yegridi ye-pixel (isitsha, irowu, namakholomu) ngamakholomu angu- n kanye negutter ebanzi yamaphikseli angu- x
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Khiqiza isistimu yegridi yephesenti enamakholomu angu- n kanye no- x % gutter ububanzi
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Khiqiza isistimu yegridi ye-pixel `input`yezinto, i-accounting ye-padding nemingcele
`.makeColumn`	`@columns: 1, @offset: 0`	Guqula noma iyiphi `div`ibe ikholomu yegridi ngaphandle `.span*`kwamakilasi

Izakhiwo ze-CSS3

I-Mixin	Amapharamitha	Ukusetshenziswa
`.border-radius()`	`@radius`	Zungezisa amakhona e-elementi. Kungaba inani elilodwa noma amanani amane ahlukaniswe isikhala
`.box-shadow()`	`@shadow`	Engeza isithunzi sokudonsa entweni
`.transition()`	`@transition`	Engeza umphumela wokuguquka we-CSS3 (isb, `all .2s linear`)
`.rotate()`	`@degrees`	Zungezisa isici esingu- n degrees
`.scale()`	`@ratio`	Kala i-elementi ibe ngu- n izikhathi zosayizi wayo wangempela
`.translate()`	`@x, @y`	Hambisa i-elementi ezindizeni zika-x kanye no-y
`.background-clip()`	`@clip`	Nqampuna ingemuva le-elementi (iwusizo `border-radius`)
`.background-size()`	`@size`	Lawula usayizi wezithombe ezingemuva nge-CSS3
`.box-sizing()`	`@boxmodel`	Shintsha imodeli yebhokisi le-elementi (isb, `border-box`ngobubanzi obugcwele `input`)
`.user-select()`	`@select`	Lawula ukukhethwa kwekhesa kombhalo ekhasini
`.backface-visibility()`	`@visibility: visible`	Vimbela ukucwayiza kokuqukethwe uma usebenzisa ukuguqulwa kwe-CSS 3D
`.resizable()`	`@direction: both`	Yenza noma iyiphi i-elementi ikhule kabusha kwesokudla nangaphansi
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Yenza okuqukethwe kwanoma iyiphi i-elementi sebenzisa amakholomu e-CSS3
`.hyphens()`	`@mode: auto`	I-CSS3 hyphenation uma uyifuna (kuhlanganisa `word-wrap: break-word`)

Izizinda kanye gradients

I-Mixin	Amapharamitha	Ukusetshenziswa
`#translucent > .background()`	`@color: @white, @alpha: 1`	Nikeza isici umbala wangemuva ocwebezelayo
`#translucent > .border()`	`@color: @white, @alpha: 1`	Nikeza isici umbala womngcele ocwebileyo
`#gradient > .vertical()`	`@startColor, @endColor`	Dala i-gradient yangemuva eqondile yesiphequluli esiphambene
`#gradient > .horizontal()`	`@startColor, @endColor`	Dala i-gradient yangemuva evundlile yesiphequluli esiphambene
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Dala i-gradient yangemuva ye-cross-browser
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Dala i-gradient yangemuva yesiphequluli esinemibala emithathu
`#gradient > .radial()`	`@innerColor, @outerColor`	Dala i-gradient yangemuva ye-radial yesiphequluli esiphambene
`#gradient > .striped()`	`@color, @angle`	Dala i-gradient yangemuva enemigqa yesiphequluli
`#gradientBar()`	`@primaryColor, @secondaryColor`	Isetshenziselwa izinkinobho ukunikeza i-gradient kanye nomngcele obumnyama kancane

Qaphela: Uma uthumela isicelo sokudonsa ku-GitHub nge-CSS eguquliwe, kufanele uphinde uhlanganise i-CSS nganoma iyiphi yalezi zindlela.

Amathuluzi okuhlanganiswa

I-node ene-makefile

Faka isihlanganisi somugqa womyalo ONCANE, i-JSHint, Recess, kanye ne-uglip-js emhlabeni jikelele nge-npm ngokusebenzisa umyalo olandelayo:

$ npm install -g less jshint recess ugify-js

Uma usufakiwe vele ugijime makekusuka empandeni yohla lwemibhalo yakho ye-bootstrap futhi usulungile.

Ukwengeza, uma une -watchr efakiwe, ungase ugijimele make watchukuthi i-bootstrap yakhiwe kabusha ngokuzenzakalelayo njalo uma uhlela ifayela ku-bootstrap lib (lokhu akudingekile, indlela elula nje).

Umugqa womyalo

Faka ithuluzi lomugqa womyalo we-LESS ngeNode bese usebenzisa umyalo olandelayo:

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

Qiniseka ukuthi uyafaka --compresskulowo myalo uma uzama ukulondoloza amabhayithi athile!

I-Javascript

Landa i-Less.js yakamuva futhi ufake indlela eya kuyo (kanye ne-Bootstrap) kufayela le- <head>.

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

Ukuze uhlanganise kabusha amafayela .less, vele uwagcine bese ulayisha kabusha ikhasi lakho. I-Less.js iyawahlanganisa futhi iwagcine endaweni yokugcina indawo.

Uhlelo lokusebenza lwe-Mac olungekho emthethweni

Uhlelo lokusebenza lwe-Mac olungekho emthethweni lubuka izinkomba zamafayela .less futhi luhlanganise ikhodi kumafayela endawo ngemva kokulondolozwa kwefayela elibukiwe .less.

Uma uthanda, ungakwazi ukuguqula okuncamelayo kuhlelo lokusebenza ukuze kuncishiswe okuzenzakalelayo nokuthi iyiphi inkomba amafayela ahlanganisiwe agcina engenile.

Yakhiwe nge-LESS

Kungani KUNCANE?

Yini efakiwe?

Funda kabanzi

Okuguquguqukayo

Imiksi

Imisebenzi

Okuguquguqukayo kwe-Bootstrap OKUNCANE, amanani azo, nemihlahlandlela yokusetshenziswa

I-scaffolding nezixhumanisi

Isistimu yegridi

Ukuthayipha

Amathebula

Imibala empunga

Imibala ye-accent

Izingxenye

Izinkinobho

Amafomu

Izifunda zefomu nezexwayiso

Ibha ye-Navbar

Okwehliswayo

Iqembu lamaqhawe

Izingxube ze-Bootstrap

Mayelana nama-mixins

Izingxube eziyisisekelo

Izingxube zeParametric

Engeza eyakho kalula

Kufakwe imiksi

Izinsiza

Amafomu

Ukuthayipha

Isistimu yegridi

Izakhiwo ze-CSS3

Izizinda kanye gradients

Ihlanganisa i-Bootstrap nge-LESS

Amathuluzi okuhlanganiswa

I-node ene-makefile

Umugqa womyalo

I-Javascript

Uhlelo lokusebenza lwe-Mac olungekho emthethweni

Izinhlelo zokusebenza eziningi ze-Mac

I-crunch

I-CodeKit

Kulula