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.
Yakhiwe nge-LESS
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.
Okuguquguqukayo kwe-Bootstrap OKUNCANE, amanani azo, nemihlahlandlela yokusetshenziswa
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 |
Iqembu lamaqhawe
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
Izingxube ze-Bootstrap
Mayelana nama-mixins
Izingxube eziyisisekelo
I-mixin eyisisekelo empeleni ihlanganisa noma ingxenye yamazwibela e-CSS. Abhalwe njengekilasi le-CSS futhi angabizwa 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 usebenzisamargin: auto |
.ie7-inline-block() |
akukho | Sebenzisa ngaphezu display: inline-blockkokujwayelekile 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 placeholderumbala 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 yakamuva enamakholomu angu- n kanye no- x % gutter ububanzi |
#grid > .input() |
@gridColumnWidth, @gridGutterWidth |
Khiqiza isistimu yegridi ye-pixel inputyezinto, i-accounting ye-padding nemingcele |
.makeColumn |
@columns: 1, @offset: 0 |
Guqula noma iyiphi divibe 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-boxngobubanzi 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 |
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 |
Ihlanganisa i-Bootstrap nge-LESS
Amathuluzi okuhlanganiswa
I-node ene-makefile
Faka isihlanganisi somugqa womyalo we-LESS kanye ne-uglify-js emhlabeni jikelele nge-npm ngokusebenzisa umyalo olandelayo:
$ npm install -g less 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.
Izinhlelo zokusebenza eziningi ze-Mac
I-crunch
I-Crunch ingumhleli obukeka kahle KA-LESS kanye nomhlanganisi owakhelwe ku-Adobe Air.
I-CodeKit
Idalwe umfana ofanayo nohlelo lokusebenza lwe-Mac olungekho emthethweni, i-CodeKit iwuhlelo lokusebenza lwe-Mac oluhlanganisa i-LESS, i-SASS, i-Stylus, ne-CoffeeScript.
Kulula
Uhlelo lokusebenza lwe-Mac, i-Linux, ne-PC lokuhlanganiswa kokudonsa nokudedela kwamafayela angu-LESS. Futhi, ikhodi yomthombo iku-GitHub .