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

I-CSS ENCANE

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.

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

Izingxube zeParametric

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

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

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 yephesenti 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
.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.

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 .