Ukusebenzisa i-LESS ngeBootstrap

Yenza ngokwezifiso kwaye wandise i-Bootstrap nge - LESS , i-preprocessor ye-CSS, ukuthatha ithuba lokuguquguquka, imixube, kunye nezinye ezisetyenziselwa ukwakha i-Bootstrap's CSS.

Kutheni KUPHANTSI?

I-Bootstrap yenziwe nge-LESS kumbindi wayo, ulwimi oluguquguqukayo lweshiti lephepha elenziwe ngumhlobo wethu olungileyo, u- Alexis Sellier . Yenza ukuphuhlisa iinkqubo-based CSS ngokukhawuleza, lula, kwaye kumnandi ngakumbi.

Yintoni ebandakanyiweyo?

Njengolwandiso lwe-CSS, i-LESS ibandakanya izinto eziguquguqukayo, imixube yeekhowudi eziphinda zisetyenziswe, imisebenzi yezibalo ezilula, ukuzalanisa, kunye nemisebenzi yombala.

Funda nzulu

I-CSS encinci

Ndwendwela iwebhusayithi esemthethweni ku- http: //lesscss.org/ ukufunda ngakumbi.

Izinto eziguquguqukayo

Ukulawula imibala kunye namaxabiso e-pixel kwi-CSS kunokuba yintlungu encinci, ihlala igcwele ikopi kunye nokuncamathisela. Hayi nge-LESS nangona-nika imibala okanye ixabiso le-pixel njengezinto eziguquguqukayo kwaye uzitshintshe kube kanye.

Imixube

Ezo zibhengezo zomda werediyasi ezintathu ekufuneka uyenzile kwi-CSS eqhelekileyo? Ngoku baphantsi kumgca omnye ngoncedo lwemixube, iziqwengana zekhowudi onokuphinda uzisebenzisele naphi na.

Imisebenzi

Yenza igridi yakho, ikhokele, kwaye ibe bhetyebhetye ngakumbi ngokwenza imathematika kubhabho ngemisebenzi. Phindaphinda, yahlule, yongeza, kwaye uthabathe indlela yakho eya kwi-CSS yengqondo.

I-scaffolding kunye namakhonkco

@bodyBackground @white Umbala wephepha ongasemva
@textColor @grayDark Umbala wokubhaliweyo omiselweyo womzimba uphela, izihloko, nokunye
@linkColor #08c Umbala wombhalo wekhonkco omiselweyo
@linkColorHover darken(@linkColor, 15%) Ikhonkco elimiselweyo lombala wehove yesicatshulwa

Inkqubo yegridi

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

Ukuchwetheza

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

Iitafile

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

Imibala engwevu

@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

Amacandelo

Amaqhosha

@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

Iifom

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

Iifom zelizwe kunye nezilumkiso

@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

Ukwehla

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

Iyunithi yeqhawe

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Malunga nemixube

Imixube esisiseko

Umxube osisiseko kukubandakanya okanye inxenye yesnippet yeCSS. Zibhalwe njengeklasi yeCSS kwaye zinokubizwa naphi na.

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

Imixube yeParametric

I-parametric mixin ifana nje nomxube osisiseko, kodwa iyayamkela iparameters (kungoko igama) ngamaxabiso angagqibekanga.

  1. . into {
  2. . umda - irediyasi ( 4px );
  3. }

Yongeza eyakho ngokulula

Phantse yonke imixube ye-Bootstrap igcinwe kwi-mixins.less, into emangalisayo eluncedo .ifayile encinci eyenza ukuba usebenzise i-mixin kuyo nayiphi na ifayile engaphantsi kwi-toolkit.

Ke, qhubeka usebenzise esele ukho okanye uzive ukhululekile ukongeza ezakho njengoko ufuna.

Ibandakanyiwe imixube

Izinto eziluncedo

Mixin Iiparamitha Ukusetyenziswa
.clearfix() akukho nanye Yongeza nakuwuphi na umzali ukususa izinto ezidadayo ngaphakathi
.tab-focus() akukho nanye Faka isimbo sokugxila kwiWebkit kunye nolwandlalo olungqukuva lweFirefox
.center-block() akukho nanye Auto iziko ibhloko-level element usebenzisamargin: auto
.ie7-inline-block() akukho nanye Sebenzisa ukongeza rhoqo display: inline-blockukufumana inkxaso ye-IE7
.size() @height @width Setha ngokukhawuleza ubude kunye nobubanzi kumgca omnye
.square() @size Yakha .size()ukuseta ububanzi kunye nobude njengexabiso elifanayo
.opacity() @opacity Seta, ngamanani apheleleyo, ipesenti yokungafihli (umz., "50" okanye "75")

Iifom

Mixin Iiparamitha Ukusetyenziswa
.placeholder() @color: @placeholderText Seta placeholderumbala wokubhaliweyo wamagalelo

Ukuchwetheza

Mixin Iiparamitha Ukusetyenziswa
#font > #family > .serif() akukho nanye Yenza isiqalelo sebenzisa isitakhi sefonti yeserif
#font > #family > .sans-serif() akukho nanye Yenza isiqalelo sebenzisa isitakhi sefonti sans-serif
#font > #family > .monospace() akukho nanye Yenza isiqalelo sebenzisa isitakhi sefonti ye-monospace
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Seta ngokulula ubungakanani befonti, ubunzima, kunye nokukhokela
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Seta usapho lwefonti kwi-serif, kwaye ulawule ubungakanani, ubunzima, kunye nokukhokela
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Seta usapho lwefonti kwi-sans-serif, kwaye ulawule ubungakanani, ubunzima, kunye nokukhokela
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Seta usapho lwefonti kwi-monospace, kunye nokulawula ubungakanani, ubunzima, kunye nokukhokela

Inkqubo yegridi

Mixin Iiparamitha Ukusetyenziswa
.container-fixed() akukho nanye Yenza isikhongozeli esithe tye ukuze ubambe umxholo wakho
#grid > .core() @gridColumnWidth, @gridGutterWidth Yenza i-pixel yegridi yesixokelelwano (isikhongozeli, umqolo, kunye nekholamu) enekholamu ze- n kunye ne- pixel ebanzi yegutter
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Yenza ipesenti yesixokelelwano segridi ngeekholamu ze- n kunye ne- x % igutter ebanzi
#grid > .input() @gridColumnWidth, @gridGutterWidth Yenza inkqubo yegridi ye-pixel inputyezinto, ukubalwa kwe-padding kunye nemida
.makeColumn @columns: 1, @offset: 0 Jika nayiphi na divikholomu yegridi ngaphandle .span*kweeklasi

Iimpawu zeCSS3

Mixin Iiparamitha Ukusetyenziswa
.border-radius() @radius Jikelezisa iikona zesiqalelo. Inokuba lixabiso elinye okanye amaxabiso amane ahlukaniswe isithuba
.box-shadow() @shadow Yongeza isithunzi sokulahla into
.transition() @transition Yongeza isiphumo senguqu ye-CSS3 (umzekelo, all .2s linear)
.rotate() @degrees Jikelezisa isiqalelo n izidanga
.scale() @ratio Linganisa into ukuya ku- n ngokuphindaphinda ubukhulu bayo boqobo
.translate() @x, @y Hambisa isiqalelo kwi-x kunye ne-y iinqwelomoya
.background-clip() @clip Nciphisa imvelaphi yesiqalelo (iluncedo border-radius)
.background-size() @size Lawula ubungakanani bemifanekiso yangasemva ngeCSS3
.box-sizing() @boxmodel Guqula imodeli yebhokisi yento (umzekelo, border-boxkububanzi obugcweleyo input)
.user-select() @select Lawula isalathisi sokukhetha okubhaliweyo kwiphepha
.backface-visibility() @visibility: visible Thintela ukuqhwanyaza komxholo xa usebenzisa iinguqu zeCSS 3D
.resizable() @direction: both Yenza nasiphi na isiqalelo siphinde silingane ekunene nasezantsi
.content-columns() @columnCount, @columnGap: @gridGutterWidth Yenza umxholo wayo nayiphi na into usebenzise iikholamu zeCSS3
.hyphens() @mode: auto CSS3 hyphenation xa uyifuna (ibandakanya word-wrap: break-word)

Imvelaphi kunye neegradient

Mixin Iiparamitha Ukusetyenziswa
#translucent > .background() @color: @white, @alpha: 1 Nika isiqalelo umbala ongasemva ogqamileyo
#translucent > .border() @color: @white, @alpha: 1 Nika isiqalelo umbala ogqamileyo womda
#gradient > .vertical() @startColor, @endColor Yenza ibhrawuza enqamlezileyo ngokuthe nkqo ukuthambeka okungasemva
#gradient > .horizontal() @startColor, @endColor Yenza ibhrawuza enqamlezayo ethe tyaba ngasemva ngokuthambeka
#gradient > .directional() @startColor, @endColor, @deg Yenza i-gradient yemvelaphi yebrowser enqamlezayo
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Yenza ibhrawuza yemibala emithathu yegradient yangasemva
#gradient > .radial() @innerColor, @outerColor Yenza ibhrawuza enqamlezileyo yokuthambeka yangasemva
#gradient > .striped() @color, @angle Yenza ibhrawuza enemigca engasemva yegradient
#gradientBar() @primaryColor, @secondaryColor Isetyenziselwa amaqhosha ukunika umda kunye nomda obumnyama kancinane
Qaphela: Ukuba ungenisa isicelo sokutsalwa kwi-GitHub ene-CSS elungisiweyo, kufuneka uphinde uqokelele i-CSS ngayo nayiphi na kwezi ndlela.

Izixhobo zokuqulunqa

Indawo enemakefile

Faka umqokeleli welayini yomyalelo OMNCANE, JSHnt, Recess, kunye ne-uglip-js kwihlabathi jikelele nge-npm ngokwenza lo myalelo ulandelayo:

$ npm faka -g ngaphantsi kwe-jshint recess uglip-js

Nje ukuba ifakelwe vele ubaleke makeukusuka kwingcambu yolawulo lwakho lwe-bootstrap kwaye ulungele.

Ukongeza, ukuba ufake umlindi , ungabalekamake watch ukuba ne-bootstrap yakhiwe ngokuzenzekelayo ngalo lonke ixesha uhlela ifayile kwi-bootstrap lib (oku akufuneki, indlela nje elula).

Umgca womyalelo

Faka i-LESS isixhobo somgca womyalelo ngeNode kwaye usebenzise lo myalelo ulandelayo:

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

Qinisekisa ukubandakanya --compresskulo myalelo ukuba uzama ukugcina ii-bytes ezithile!

Javascript

Khuphela iLess.js yamva nje kwaye uquke indlela eya kuyo (kunye neBootstrap) kwifayile ye <head>.

<ikhonkco rel = "icwecwe lesimbo/ngaphantsi" href = "/indlela/to/bootstrap.less" > <script src = "/indlela/to/less.js" ></script>  
 

Ukuqokelela kwakhona iifayile ezingaphantsi, zigcine kwaye ulayishe kwakhona iphepha lakho. I-Less.js iyaziqokelela kwaye izigcine kwindawo yokugcina indawo.

Usetyenziso olungekho semthethweni lweMac

I-app engekho semthethweni ye-Mac ijonga abalawuli beefayile ezingaphantsi. kwaye iqulunqa ikhowudi kwiifayile zendawo emva kokugcinwa kwefayile ebukeleyo.

Ukuba uyathanda, ungaguqula okukhethiweyo kwi-app ukuze uzenzele ngokuzenzekelayo kwaye loluphi uvimba weefayili eziqokelelweyo eziphelela kuwo.

Usetyenziso olungakumbi lweMac

Qhuba

I-Crunch ngumhleli obukekayo KANYE kunye nomqokeleli owakhiwe kwi-Adobe Air.

CodeKit

Yenziwe ngumfana ofanayo nosetyenziso olungekho semthethweni lwe-Mac, iCodeKit yi-app ye-Mac ehlanganisa i-LESS, i-SASS, i-Stylus, kunye ne-CoffeeScript.

Lula

IMac, iLinux, kunye nePC app yokutsala nokulahla ukuqulunqa iifayile eziphantsi. Ngaphezu koko, ikhowudi yomthombo ikwiGitHub .