LESS zazã kple Bootstrap

Trɔ asi le Bootstrap ŋu eye nàkekee ɖe enu kple LESS , si nye CSS ƒe dɔwɔwɔ do ŋgɔ, be nàwɔ tɔtrɔwo, mixins, kple bubu siwo wozã tsɔ tu Bootstrap ƒe CSS la ŋudɔ.

Nukatae WÒLE NU GBƆ?

Wowɔ Bootstrap kple LESS le eƒe nu vevitɔ me, si nye atsyãgbalẽ ƒe gbegbɔgblɔ si trɔna si mía xɔlɔ̃ nyui, Alexis Sellier wɔ . Enaa CSS si wotu ɖe ɖoɖowo dzi wɔwɔ kabakaba, nɔa bɔbɔe, eye wòvivina wu.

Nukae le eme?

Abe CSS ƒe kekeɖenu ene la, LESS lɔ tɔtrɔwo, mixins na kɔda ƒe akpa siwo woate ŋu azã ake, dɔwɔwɔwo na akɔntabubu bɔbɔe, nesting, kple amadede ƒe dɔwɔwɔwo gɔ̃ hã ɖe eme.

Srɔ̃ nu geɖe tso eŋu

Yi nyatakakadzraɖoƒe si dziɖuɖua ɖo le http://lesscss.org/ be nàsrɔ̃ nu geɖe.

Nusiwo trɔna

Amadedewo kple piksel ƒe asixɔxɔwo dzi kpɔkpɔ le CSS me ateŋu anye vevesese vie, zi geɖe la, kɔpi kple tsɔtsɔ de eme yɔa eme fũ. Gake menye kple LESS o—de amadedewo alo pixel ƒe asixɔxɔwo asi na tɔtrɔwo eye nàtrɔ wo zi ɖeka.

Nusiwo wotsɔ tsakae

Liƒo-radius gbeƒãɖeɖe etɔ̃ mawo siwo wòle be nàwɔ le ol' CSS edziedzi me? Fifia woɖiɖi va ɖo fli ɖeka dzi to mixins, code ƒe akpa aɖewo siwo nàte ŋu azã ake le afisiafi ƒe kpekpeɖeŋu me.

Dɔwɔwɔwo

Na wò grid, ŋgɔgbe, kple geɖe wu super flexible to akɔntabubu wɔwɔ le dzodzo me kple dɔwɔwɔwo. Dzidzi ɖe edzi, ma, tsɔ kpe ɖe eŋu, eye nàɖe wò mɔ si dzi nàto ayi CSS ƒe susuŋudɔwɔwɔ gbɔ la ɖa.

Scaffolding kple kadodowo

`@bodyBackground`	`@white`	Axa ƒe megbenyawo ƒe amadede
`@textColor`	`@grayDark`	Nuŋɔŋlɔ ƒe amadede si woɖo ɖi na ŋutilã bliboa, tanyawo, kple bubuwo
`@linkColor`	`#08c`	Kadodo ƒe nuŋɔŋlɔ ƒe amadede si woɖo ɖi
`@linkColorHover`	`darken(@linkColor, 15%)`	Default kadodo nuŋɔŋlɔ hover amadede

Grid ƒe ɖoɖo

`@gridColumns`	12. 12
`@gridColumnWidth`	60px ƒe didime
`@gridGutterWidth`	20px ƒe didime
`@fluidGridColumnWidth`	6.382978723% ƒe xexlẽme.
`@fluidGridGutterWidth`	2.127659574% ƒe xexlẽme.

Agbalẽtata ƒe nuŋɔŋlɔ

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, si me womewɔ naneke le o
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Amedɔdɔ Yeye", teƒe ɖeka
`@baseFontSize`	13px ƒe didime	Ele be wòanye pikselwo
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px ƒe didime	Ele be wòanye pikselwo
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Kplɔ̃wo

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

Amadede siwo le amadede dzẽ me

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

Accent ƒe amadedewo

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

Nusiwo le eme

Abɔtawo ƒe ƒuƒoƒo

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

Kpekpeɖeŋugbalẽviwo

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

Kpe nɔnɔmewo kple nuxlɔ̃amewo ɖo

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

Navbar ƒe ŋkɔ

`@navbarHeight`	40px ƒe didime
`@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`

Nusiwo wotsɔna ƒua gbe

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

Kalẽtɔ ƒe akpa aɖe

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

Ku ɖe mixins ŋu

Mixin veviwo

Mixin vevi aɖe nye vevietɔ include alo akpa aɖe na CSS ƒe akpa aɖe. Woŋlɔ wo abe CSS ƒe klass ene eye woateŋu ayɔ wo le afisiafi.

. element { .
  . ɖɔɖɔɖo si me kɔ ();
} .

Parametric mixins ƒe ƒuƒoƒo

Parametric mixin le abe gɔmedze mixin ene, gake exɔa parameters hã (eyata ŋkɔe nye ema) kple asixɔxɔ gbãtɔ siwo woateŋu awɔ.

. element { .
  . liƒo - didime ( 4px );
} .

Tsɔ tɔwò kpe ɖe eŋu bɔbɔe

Wodzraa Bootstrap ƒe mixinwo katã kloe ɖo ɖe mixins.less me, si nye .less faɛl wɔnuku aɖe si zãa mixin le .less faɛl siwo le dɔwɔnuawo me la dometɔ ɖesiaɖe me.

Eyata, yi ŋgɔ nàzã esiwo li xoxo alo nàtsɔ tɔwò akpe ɖe eŋu faa alesi nèhiãe.

Mixins hã le eme

Dɔwɔnu Siwo Wozãna

Mixin ƒe ƒuƒoƒo	Parameters ƒe nɔnɔmewo	Zãzã
`.clearfix()`	ɖeke o	Tsɔ kpe ɖe dzila ɖesiaɖe ŋu be wòakɔ floats le eme
`.tab-focus()`	ɖeke o	Wɔ Webkit ƒe susu ƒe atsyã kple Firefox ƒe nɔnɔmetata goglo la ŋudɔ
`.center-block()`	ɖeke o	Auto titina a block-dzidzenu element zã`margin: auto`
`.ie7-inline-block()`	ɖeke o	Zã kpe ɖe edziedzi `display: inline-block`ŋu be nàxɔ IE7 ƒe kpekpeɖeŋu
`.size()`	`@height @width`	Ðo kɔkɔme kple kekeme ɖe fli ɖeka dzi kaba
`.square()`	`@size`	Tu ɖe edzi `.size()`be wòaɖo kekeme kple kɔkɔme abe asixɔxɔ ɖeka ene
`.opacity()`	`@opacity`	Ðo, le xexlẽdzesi blibowo me, opacity ƒe alafa memamã (le kpɔɖeŋu me, "50" alo "75") .

Kpekpeɖeŋugbalẽviwo

Mixin ƒe ƒuƒoƒo	Parameters ƒe nɔnɔmewo	Zãzã
`.placeholder()`	`@color: @placeholderText`	Ðo `placeholder`nuŋɔŋlɔ ƒe amadede na nyawo tsɔtsɔ de eme

Agbalẽtata ƒe nuŋɔŋlɔ

Mixin ƒe ƒuƒoƒo	Parameters ƒe nɔnɔmewo	Zãzã
`#font > #family > .serif()`	ɖeke o	Na element aɖe nazã serif font stack
`#font > #family > .sans-serif()`	ɖeke o	Na element aɖe nazã sans-serif ŋɔŋlɔdzesiwo ƒe ƒuƒoƒo
`#font > #family > .monospace()`	ɖeke o	Na element aɖe nazã monospace font stack
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ðo ŋɔŋlɔdzesi ƒe lolome, kpekpeme, kple ŋgɔdonya bɔbɔe
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ðo ŋɔŋlɔdzesi ƒomea ɖe serif dzi, eye nàkpɔ lolome, kpekpeme, kple ŋgɔdonya dzi
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ðo ŋɔŋlɔdzesi ƒomea ɖe sans-serif, eye nàkpɔ lolome, kpekpeme, kple ŋgɔdonya dzi
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ðo ŋɔŋlɔdzesiwo ƒe ƒomea ɖe teƒe ɖeka, eye nàkpɔ lolome, kpekpeme, kple ŋgɔdonya dzi

Grid ƒe ɖoɖo

Mixin ƒe ƒuƒoƒo	Parameters ƒe nɔnɔmewo	Zãzã
`.container-fixed()`	ɖeke o	Wɔ nugoe si le titina le tsia dzi hena wò nyatakakawo léle ɖe asi
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Wɔ pixel grid ɖoɖo (nugoe, fli, kple sɔtiwo) kple n sɔtiwo kple x pixel keke gutter
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Wɔ alafa memamã ƒe grid ɖoɖo si me n sɔtiwo kple x % keke gutter le
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Wɔ pixel grid ɖoɖoa na `input`elementwo, akɔntabubu na padding kple liƒowo
`.makeColumn`	`@columns: 1, @offset: 0`	Trɔ ɖesiaɖe `div`wòazu grid column `.span*`klassawo manɔmee

CSS3 ƒe nɔnɔmewo

Mixin ƒe ƒuƒoƒo	Parameters ƒe nɔnɔmewo	Zãzã
`.border-radius()`	`@radius`	Tsɔ nu vevi aɖe ƒe dzogoewo ƒo xlãe. Ate ŋu anye asixɔxɔ ɖeka alo asixɔxɔ ene siwo dome dometsotso le
`.box-shadow()`	`@shadow`	Tsɔ vɔvɔli si le tsia dzi kpe ɖe element aɖe ŋu
`.transition()`	`@transition`	Tsɔ CSS3 ƒe tɔtrɔ ƒe ŋusẽkpɔɖeamedzi kpee (le kpɔɖeŋu me, `all .2s linear`) .
`.rotate()`	`@degrees`	Trɔ element aɖe n degree
`.scale()`	`@ratio`	Do nu vevi aɖe ɖe eƒe lolome gbãtɔ ƒe teƒe n
`.translate()`	`@x, @y`	Ʋu element aɖe le x kple y yameʋuwo dzi
`.background-clip()`	`@clip`	Kpe nu aɖe ƒe megbenya (si ɖea vi na `border-radius`) .
`.background-size()`	`@size`	Kpɔ megbe nɔnɔmetatawo ƒe lolome dzi to CSS3 dzi
`.box-sizing()`	`@boxmodel`	Trɔ aɖaka ƒe kpɔɖeŋu na element aɖe (le kpɔɖeŋu me, `border-box`na full-width `input`) .
`.user-select()`	`@select`	Kpɔ nuŋɔŋlɔ siwo le axa aɖe dzi ƒe tiatia le cursor dzi
`.backface-visibility()`	`@visibility: visible`	Xɔ mɔ na nyatakakawo ƒe flitete ne èle CSS 3D ƒe tɔtrɔwo zãm
`.resizable()`	`@direction: both`	Na element ɖesiaɖe ƒe lolome nate ŋu atrɔ le ɖusime kple ete
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Na element ɖesiaɖe ƒe emenyawo nazã CSS3 sɔtiwo
`.hyphens()`	`@mode: auto`	CSS3 ƒe flitete ne èdi (elɔe ɖe eme `word-wrap: break-word`) .

Nusiwo dzɔ le megbe kple nusiwo le tsia dzi

Mixin ƒe ƒuƒoƒo	Parameters ƒe nɔnɔmewo	Zãzã
`#translucent > .background()`	`@color: @white, @alpha: 1`	Na element aɖe ƒe megbe amadede si me kɔ nyuie
`#translucent > .border()`	`@color: @white, @alpha: 1`	Na element aɖe ƒe liƒo ƒe amadede si me kɔ nyuie
`#gradient > .vertical()`	`@startColor, @endColor`	Wɔ cross-browser ƒe megbenyawo ƒe ʋuʋu le tsitrenu
`#gradient > .horizontal()`	`@startColor, @endColor`	Wɔ cross-browser ƒe megbenyawo ƒe ʋuʋu le tsia dzi
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Wɔ cross-browser ƒe mɔfiame ƒe megbenyawo ƒe ʋuʋu
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Wɔ cross-browser ƒe amadede etɔ̃ ƒe megbenyawo ƒe ʋuʋu
`#gradient > .radial()`	`@innerColor, @outerColor`	Wɔ cross-browser radial megbenyawo ƒe ʋuʋu
`#gradient > .striped()`	`@color, @angle`	Wɔ atitsoga-browser ƒe megbenyawo ƒe ʋuʋu
`#gradientBar()`	`@primaryColor, @secondaryColor`	Wozãnɛ na abɔtawo tsɔ dea asi na gradient kple liƒo si do viviti vie

De dzesii: Ne èle hehebiabia ɖom ɖe GitHub kple CSS si woɖɔli la, ele be nàgbugbɔ aƒo CSS la nu ƒu to mɔnu siawo dometɔ aɖe dzi.

Dɔwɔnu siwo woatsɔ aƒo nu nu ƒu

Node kple makefile

De LESS sedede fli nuƒoƒoƒula, JSHint, Recess, kple uglify-js xexeame katã kple npm to sedede si gbɔna la zazã me:

$ npm ɖo -g si mesɔ gbɔ o jshint ƒe ɖiɖiɖeme uglify-js

Ne ènya de eme ko la, ɖeko nàƒu du maketso wò bootstrap directory ƒe ke me eye mi katã mieɖoe.

Gakpe ɖe eŋu la, ne watchr le asiwò la, àteŋu aƒu du make watchana bootstrap nagbugbɔ atu le eɖokui si ɣesiaɣi si nètrɔ asi le faɛl aɖe ŋu le bootstrap lib me (esia mehiã o, mɔnu si sɔ ko).

Sedede ƒe fli

De LESS sedede fli dɔwɔnu to Node dzi eye nàwɔ sedede si gbɔna:

$ lessc ./less/afɔɖeɖe.less > aʋadziɖuɖu.css

Kpɔ egbɔ be --compressyede sedede ma me ne èle agbagba dzem be yeadzra byte aɖewo ɖo!

Javascript ƒe nuŋɔŋlɔ

Wɔ Less.js yeyetɔ ƒe kɔpi eye nàde mɔ si dzi nàto ayi edzi (kple Bootstrap) ɖe <head>.

<link rel = "stylesheet/less" href = "/mɔ/yi/bootstrap.less" > <script src = "/mɔ/yi/le sue.js" ></script>

Be nàgbugbɔ aƒo .less faɛlawo nu ƒu la, ɖeko nàdzra wo ɖo eye nàgbugbɔ akɔ wò axaa dzi. Less.js ƒoa wo nu ƒu eye wòdzraa wo ɖo ɖe nutoa me nudzraɖoƒe.

Mac ƒe dɔwɔnu si womewɔ le se nu o

Mac dɔwɔnu si womewɔ le se nu o la léa ŋku ɖe .less faɛlwo ƒe nyatakakadzraɖoƒewo ŋu eye wòƒoa kɔpiawo nu ƒu ɖe faɛl siwo le mia gbɔ me le .less faɛl si wokpɔ la dzraɖo ɖesiaɖe megbe.

Ne èdi la, àte ŋu atrɔ asi le nusiwo nèdi ŋu le dɔwɔnua me be nàte ŋu awɔ nu suesuesue siwo le eɖokui si kple nyatakakadzraɖoƒe si me faɛl siwo woƒo ƒu la ava wu enu ɖo.

Wotue kple LESS

Nukatae WÒLE NU GBƆ?

Nukae le eme?

Srɔ̃ nu geɖe tso eŋu

Nusiwo trɔna

Nusiwo wotsɔ tsakae

Dɔwɔwɔwo

Bootstrap ƒe tɔtrɔwo LESS tɔtrɔwo, woƒe asixɔxɔwo, kple zazã ŋuti mɔfiamewo

Scaffolding kple kadodowo

Grid ƒe ɖoɖo

Agbalẽtata ƒe nuŋɔŋlɔ

Kplɔ̃wo

Amadede siwo le amadede dzẽ me

Accent ƒe amadedewo

Nusiwo le eme

Abɔtawo ƒe ƒuƒoƒo

Kpekpeɖeŋugbalẽviwo

Kpe nɔnɔmewo kple nuxlɔ̃amewo ɖo

Navbar ƒe ŋkɔ

Nusiwo wotsɔna ƒua gbe

Kalẽtɔ ƒe akpa aɖe

Bootstrap ƒe mixins

Ku ɖe mixins ŋu

Mixin veviwo

Parametric mixins ƒe ƒuƒoƒo

Tsɔ tɔwò kpe ɖe eŋu bɔbɔe

Mixins hã le eme

Dɔwɔnu Siwo Wozãna

Kpekpeɖeŋugbalẽviwo

Agbalẽtata ƒe nuŋɔŋlɔ

Grid ƒe ɖoɖo

CSS3 ƒe nɔnɔmewo

Nusiwo dzɔ le megbe kple nusiwo le tsia dzi

Bootstrap ƒe ƒuƒoƒo kple LESS

Dɔwɔnu siwo woatsɔ aƒo nu nu ƒu

Node kple makefile

Sedede ƒe fli

Javascript ƒe nuŋɔŋlɔ

Mac ƒe dɔwɔnu si womewɔ le se nu o

Mac ƒe dɔwɔnu bubuwo

Crunch ƒe ƒuƒoƒo

CodeKit ƒe ƒuƒoƒo

Nu bɔbɔe aɖeke mele eme o