Ku tirhisa LESS na Bootstrap

Endla leswaku Bootstrap yi va leyi u yi lavaka hi ku tirhisa LESS , ku nga CSS preprocessor, ku tirhisa swilo leswi cinca-cincaka, mixins, ni swin’wana leswi tirhisiwaka ku aka CSS ya Bootstrap.

Ha yini LESWI SWI ENDLIWEKE?

Bootstrap yi endliwe hi LESS eka xisekelo xa yona, ririmi ra xitayili lexi cinca-cincaka leri endliweke hi munghana wa hina lonene, Alexis Sellier . Swi endla leswaku ku tumbuluxa CSS leyi sekeriweke eka tisisiteme swi hatlisa, swi olova naswona swi tsakisa.

I yini lexi katsekaka?

Tanihi ku engeteriwa ka CSS, LESS yi katsa swilo leswi cinca-cincaka, mixins ya swiphemu swa khodi leswi tirhisiwaka nakambe, matirhelo ya tinhlayo to olova, ku endla swisaka, hambi ku ri mintirho ya mihlovo.

Dyondza swo tala

Endzela webusayiti ya ximfumo eka http://lesscss.org/ ku dyondza swo tala.

Swilo leswi cinca-cincaka

Ku lawula mihlovo na mimpimo ya tipikseli eka CSS swi nga vavisa nyana, hi ntolovelo swi tele hi ku kopa na ku namarheta. A hi hi LESS hambiswiritano—avela mihlovo kumbe mimpimo ya tipikseli tanihi swilo leswi cinca-cincaka ivi u swi cinca kan’we.

Ti- mixins

Switiviso sweswo swinharhu swa border-radius leswi u faneleke ku swi endla eka ol' CSS ya ntolovelo? Sweswi va le hansi eka layini yin’we hi ku pfuniwa hi ti-mixin, swiphemu swa khodi leswi u nga swi tirhisaka nakambe kun’wana ni kun’wana.

Matirhelo ya ntirho

Endla gridi ya wena, ku rhangela, na ku olova swinene hi ku endla tinhlayo hi ku hatlisa na matirhelo. Andzisa, avanyisa, engetela, na ku susa ndlela ya wena eka CSS sanity.

Scaffolding na swihlanganisi

`@bodyBackground`	`@white`	Muhlovo wa le ndzhaku wa pheji
`@textColor`	`@grayDark`	Muhlovo wa tsalwa wa ntolovelo wa miri hinkwawo, tinhloko-mhaka ni swin’wana
`@linkColor`	`#08c`	Muhlovo wa tsalwa ra xihlanganisi xa ntolovelo
`@linkColorHover`	`darken(@linkColor, 15%)`	Muhlovo wa hover ya tsalwa ra xihlanganisi xa ntolovelo

Endlelo ra gridi

`@gridColumns`	12.
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723% hi ku olova.
`@fluidGridGutterWidth`	2.127659574% hi ku tirhisa .

Ku thayipa

`@sansFontFamily`	"Helvetica Neue", Xihlala xa xirhendzevutani, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Murhumiwa Lowuntshwa", ndhawu yin'we
`@baseFontSize`	13px	Swi fanele swi ri tipikseli
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Swi fanele swi ri tipikseli
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Matafula

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

Mihlovo ya greyscale

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

Mihlovo ya ti-accent

`@blue`	#049cdb leyi nga kona
`@green`	#46a546 hi ndlela leyi
`@red`	#9d261d leyi nga kona
`@yellow`	#ffc40d leyi nga kona
`@orange`	#f89406 hi ndlela leyi
`@pink`	#c3325f xitsonga
`@purple`	#7a43b6

Swiphemu swa kona

Swikomba-nkarhi

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

Swivumbeko

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

Vumba swiyimo na switsundzuxo

`@warningText`	#c09853 hi ndlela leyi
`@warningBackground`	#f3edd2
`@errorText`	#b94a48 hi ndlela leyi
`@errorBackground`	#f2dede
`@successText`	#468847 hi ndlela leyi
`@successBackground`	#dff0d8
`@infoText`	#3a87xihlamusela-marito
`@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`

Swilo leswi nga ehansi

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

Yuniti ya nhenha

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

Malunghana na ti mixins

Ti mixins ta xisekelo

Mixin ya xisekelo hi xiviri i ku katsa kumbe xiphemu xa xiphemu xa CSS. Ti tsariwile ku fana na tlilasi ya CSS naswona ti nga vitaniwa kun’wana na kun’wana.

. xiaki xa { .
  . ku lulamisa erivaleni ();
} .

Ti mixins ta parametric

Mixin ya parametric yi fana na mixin ya xisekelo, kambe yi tlhela yi amukela tipharamitha (hikwalaho ka vito) hi mimpimo ya xiviri yo hlawula.

. xiaki xa { .
  . ndzilakano - radius ( 4px );
} .

Hi ku olova engetela ya wena

Kwalomu ka mixin hinkwayo ya Bootstrap yi hlayisiwa eka mixins.less, fayili yo hlamarisa ya .less ya vukorhokeri leyi ku pfunaka ku tirhisa mixin eka yin’wana na yin’wana ya tifayela ta .less eka xitirhisiwa.

Kutani, yana emahlweni u tirhisa leti nga kona kutani u ntshunxeka ku engetela ta wena hilaha u lavaka hakona.

Ku katsa na ti mixins

Switirhisiwa

Mixin	Tipharamitha	Matirhiselo
`.clearfix()`	hava	Engetela eka mutswari wihi na wihi ku basisa swiphaphama endzeni
`.tab-focus()`	hava	Tirhisa xitayili xa ku kongomisa xa Webkit na xivumbeko xa xirhendzevutana xa Firefox
`.center-block()`	hava	Auto center a xiaki xa xiyimo xa xibokisana hi ku tirhisa`margin: auto`
`.ie7-inline-block()`	hava	Tirhisa ku engetela eka nkarhi na nkarhi `display: inline-block`ku kuma nseketelo wa IE7
`.size()`	`@height @width`	Hi ku hatlisa veka ku leha ni ku anama eka layini yin’we
`.square()`	`@size`	Yi aka ehenhla `.size()`ku veka ku anama na ku tlakuka tanihi ntikelo lowu fanaka
`.opacity()`	`@opacity`	Seta, hi tinomboro leti heleleke, tiphesente ta opacity (xikombiso, "50" kumbe "75") .

Swivumbeko

Mixin	Tipharamitha	Matirhiselo
`.placeholder()`	`@color: @placeholderText`	Seta `placeholder`muvala wa tsalwa eka swingheniso

Ku thayipa

Mixin	Tipharamitha	Matirhiselo
`#font > #family > .serif()`	hava	Endla elemente yi tirhisa serif font stack
`#font > #family > .sans-serif()`	hava	Endla elemente yi tirhisa sans-serif font stack
`#font > #family > .monospace()`	hava	Endla elemente yi tirhisa xithaki xa fonto ya monospace
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Seta hi ku olova mpimo wa fonto, ntiko ni ku rhangela
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Seta ndyangu wa fonto eka serif, naswona lawula vukulu, ntiko, na ku rhangela
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Seta ndyangu wa tifonto eka sans-serif, naswona u lawula vukulu, ntiko, na ku rhangela
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Seta ndyangu wa fonto eka ndhawu yin’we, naswona u lawula mpimo, ntiko ni ku rhangela

Endlelo ra gridi

Mixin	Tipharamitha	Matirhiselo
`.container-fixed()`	hava	Endla xigwitsirisi lexi nga exikarhi hi ndlela yo olova xo khoma swilo swa wena
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Endla sisiteme ya gridi ya tipikseli (xigwitsirisi, layini, na tikholomu) leyi nga na n wa tikholomu na x pixel wide gutter
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Endla sisiteme ya grid ya precent leyingana n wa tikholomu na x % ya gutter yo anama
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Endla sisiteme ya gridi ya tipikseli ya `input`swiaki, ku hlayela ku padding na mindzilakano
`.makeColumn`	`@columns: 1, @offset: 0`	Pfuxeta yin’wana na yin’wana `div`yi va kholomo ya gridi handle ka `.span*`titlilasi

Swihlawulekisi swa CSS3

Mixin	Tipharamitha	Matirhiselo
`.border-radius()`	`@radius`	Xirhendzevutani xa makhon’wa ya elemente. Ku nga va ntikelo wun’we kumbe mimpimo ya mune leyi hambanisiweke hi xivandla
`.box-shadow()`	`@shadow`	Engetela ndzhuti wa drop eka elemente
`.transition()`	`@transition`	Engetela mbuyelo wa ku cinca wa CSS3 (xikombiso, `all .2s linear`) .
`.rotate()`	`@degrees`	Jikisa elemente hi n degrees
`.scale()`	`@ratio`	Xikalo xa elemente ku ya eka n leyi phindhiweke ka mpimo wa yona wo sungula
`.translate()`	`@x, @y`	Susa elemente eka swiphemu swa x na y
`.background-clip()`	`@clip`	Tsema ndzhaku ka elemente (leswi pfunaka eka `border-radius`) .
`.background-size()`	`@size`	Lawula vukulu bya swifaniso swa le ndzhaku hi ku tirhisa CSS3
`.box-sizing()`	`@boxmodel`	Cinca modele wa bokisi ra elemente (xikombiso, `border-box`eka full-width `input`) .
`.user-select()`	`@select`	Lawula ku hlawuriwa ka xikombiso xa tsalwa eka tluka
`.backface-visibility()`	`@visibility: visible`	Sivela ku tsindziyela ka swilo leswi nga endzeni loko u tirhisa ku hundzuka ka CSS 3D
`.resizable()`	`@direction: both`	Endla leswaku element yin’wana na yin’wana yi cinca sayizi ya yena exineneni nale hansi
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Endla leswaku nhundzu ya elemente yihi na yihi yi tirhisa tikholomu ta CSS3

Swivumbeko swa le ndzhaku ni swirhendzevutana

Mixin	Tipharamitha	Matirhiselo
`#translucent > .background()`	`@color: @white, @alpha: 1`	Nyika elemente muvala wa le ndzhaku lowu vonakaka kahle
`#translucent > .border()`	`@color: @white, @alpha: 1`	Nyika elemente muvala wa ndzilakano lowu vonakaka kahle
`#gradient > .vertical()`	`@startColor, @endColor`	Endla xirhendzevutani xa le ndzhaku lexi yimisiweke xa xihambano xa xihlamusela-marito
`#gradient > .horizontal()`	`@startColor, @endColor`	Endla xirhendzevutani xa le ndzhaku xa xihambano xa xihlamusela-marito
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Endla xirhendzevutani xa le ndzhaku xa nkongomiso wa xihlamusela-marito xa xihambano
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Endla xirhendzevutana xa le ndzhaku xa mihlovo yinharhu xa xihambano xa xihlamusela-marito
`#gradient > .radial()`	`@innerColor, @outerColor`	Endla xirhendzevutana xa le ndzhaku xa radial xa cross-browser
`#gradient > .striped()`	`@color, @angle`	Endla xirhendzevutani xa le ndzhaku xa mitila ya xihambano xa xihlamusela-marito
`#gradientBar()`	`@primaryColor, @secondaryColor`	Yi tirhisiwa eka swikomba-nkarhi ku avela gradient na border ya ntima nyana

Xiya: Loko u rhumela xikombelo xo koka eka GitHub hi CSS leyi cinciweke, u fanele ku hlengeleta nakambe CSS hi ku tirhisa yin’wana na yin’wana ya tindlela leti.

Switirhisiwa swo hlengeleta

Node leyi nga na makefile

Nghenisa muhlanganisi wa layini ya swileriso ya LESS na uglify-js emisaveni hinkwayo hi npm hi ku tirhisa xileriso lexi landzelaka:

$ npm nghenisa -g ehansi ka uglify-js

Loko se u nghenisiwile ntsena tsutsuma makeku suka eka rimitsu ra bootstrap directory ya wena naswona u vekiwile hinkwenu.

Ku engetela kwalaho, loko u ri na watchr leyi nghenisiweke, u nga ha tsutsuma make watchleswaku bootstrap yi akiwa nakambe hi ku tisungulela nkarhi wun’wana ni wun’wana loko u hlela fayili eka bootstrap lib (leswi a swi laveki, i ndlela yo olova ntsena).

Layini ya swileriso

Nghenisa xitirhisiwa xa layini ya swileriso xa LESS hi ku tirhisa Node ivi u tirhisa xileriso lexi landzelaka:

$ lessc ./less/xiphemu xa xirhendzevutani.less > xirhangiso xa xirhendzevutani.css

Tiyiseka leswaku u katsa --compresseka xileriso xexo loko u ringeta ku hlayisa tibayiti tin’wana!

Javascript

Download Less.js ya sweswinyana ivi u katsa ndlela yo ya eka yona (na Bootstrap) eka <head>.

<link rel = "xiphephana xa xitayili/le hansi" href = "/ndlela/ku ya eka/bootstrap.less" > <script src = "/ndlela/ku ya eka/le hansi.js" ></script>

Ku tlhela u hlengeleta tifayela ta .less, ti hlayise ntsena ivi u tlhela u layicha tluka ra wena. Less.js yi ti hlengeleta no ti hlayisa eka vuhlayiselo bya laha kaya.

App ya Mac leyi nga riki ya ximfumo

App leyi nga riki ya ximfumo ya Mac yi hlalela tidayirekitara ta tifayela ta .less naswona yi hlengeleta khodi eka tifayela ta laha kaya endzhaku ka ku hlayisiwa kun’wana ni kun’wana ka fayili ya .less leyi hlaleriweke.

Loko u swi tsakela, u nga cinca-cinca leswi u swi tsakelaka eka app leswaku u ta hunguta hi ku tisungulela ni leswaku tifayela leti hlengeletiweke ti hetelelaka ti ri eka xikombo xihi.

Yi akiwile hi LESS

Ha yini LESWI SWI ENDLIWEKE?

I yini lexi katsekaka?

Dyondza swo tala

Swilo leswi cinca-cincaka

Ti- mixins

Matirhelo ya ntirho

Swilo leswi cinca-cincaka swa bootstrap Swilo leswi cinca-cincaka swa LESS, mimpimo ya swona, na swiletelo swa matirhiselo

Scaffolding na swihlanganisi

Endlelo ra gridi

Ku thayipa

Matafula

Mihlovo ya greyscale

Mihlovo ya ti-accent

Swiphemu swa kona

Swikomba-nkarhi

Swivumbeko

Vumba swiyimo na switsundzuxo

Navbar

Swilo leswi nga ehansi

Yuniti ya nhenha

Ti mixins ta xirhendzevutani xa bootstrap

Malunghana na ti mixins

Ti mixins ta xisekelo

Ti mixins ta parametric

Hi ku olova engetela ya wena

Ku katsa na ti mixins

Switirhisiwa

Swivumbeko

Ku thayipa

Endlelo ra gridi

Swihlawulekisi swa CSS3

Swivumbeko swa le ndzhaku ni swirhendzevutana

Ku hlengeleta Bootstrap hi LESS

Switirhisiwa swo hlengeleta

Node leyi nga na makefile

Layini ya swileriso

Javascript

App ya Mac leyi nga riki ya ximfumo

Ti-app tin’wana ta Mac

Ku rhurhumela

Xitirhisiwa xa Khodi

Swi nga olovi