Go diriša LESS ka Bootstrap

Tlwaetša le go katološa Bootstrap ka LESS , e lego sedirišwa sa pele sa CSS, go diriša diphetogo, mixins, le tše dingwe tšeo di dirišetšwago go aga CSS ya Bootstrap.

Ke ka baka la’ng go le ka tlase ga moo?

Bootstrap e dirilwe ka LESS motheong wa yona, polelo ya stylesheet ye e fetogago yeo e hlotšwego ke mogwera wa rena yo mobotse, Alexis Sellier . E dira gore go hlabolla CSS ye e theilwego godimo ga ditshepedišo go be ka lebelo, go be bonolo le go ba mo go thabišago.

Ke eng seo se akaretšwago?

Bjalo ka katoloso ya CSS, LESS e akaretša diphetogo, mixins bakeng sa dikarolwana tša khoutu tšeo di ka dirišwago gape, ditiro tša dipalo tše bonolo, go bea dihlaga gaešita le mešomo ya mebala.

Ithute ka botlalo

Etela weposaete ya semmušo go http://lesscss.org/ go ithuta ka botlalo.

Diphetogo

Go laola mebala le dikelo tša dipiksele ka go CSS e ka ba bohloko bjo bonyenyane, gantši e tletše ka go kopiša le go kgomaretša. E sego ka LESS le ge go le bjalo—abela mebala goba dikelo tša dipiksele bjalo ka diphetogo gomme o di fetoše gatee.

Ditswaki

Dipolelo tšeo tše tharo tša mollwane-radius tšeo o swanetšego go di dira ka go CSS ya ka mehla ol'? Bjale di theogile go mola o tee ka thušo ya di-mixin, dikarolo tša khoutu yeo o ka e dirišago gape kae goba kae.

Ditiro tša go šoma

Dira gore keriti ya gago, e eteletšego pele, le go feta super tenyetsego ka go dira dipalo ka go fofa ka ditiro. Atisa, arola, oketša, le go tloša tsela ya gago go ya go CSS sanity.

Scaffolding le dikgokelo

`@bodyBackground`	`@white`	Mmala wa bokamorago bja letlakala
`@textColor`	`@grayDark`	Mmala wa sengwalwa wa maitirelo wa mmele ka moka, dihlogo, le tše dingwe
`@linkColor`	`#08c`	Mmala wa sengwalwa sa kgokagano ya tlwaelo
`@linkColorHover`	`darken(@linkColor, 15%)`	Mmala wa go šuthiša sengwalwa sa kgokagano ya tlwaelo

Tshepedišo ya keriti

`@gridColumns`	12.
`@gridColumnWidth`	60px e le
`@gridGutterWidth`	20px e le
`@fluidGridColumnWidth`	6,382978723% e le .
`@fluidGridGutterWidth`	2,127659574% e le .

Go thaepa

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, ntle le serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Motsamaisi o Mocha", sebaka se le seng
`@baseFontSize`	13px e le	E swanetše go ba dipiksele
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px e le	E swanetše go ba dipiksele
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Ditafola

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

Mebala ya sekala sa bohlooho

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

Mebala ya accent

`@blue`	# 049cdb e le
`@green`	#46a546 e le
`@red`	# 9d261d
`@yellow`	# ffc 40 d e
`@orange`	# f89406 e le
`@pink`	# c3325f
`@purple`	#7a43b6

Dikarolo

Dikonope

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

Diforomo

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

Foromo e re le ditemošo

`@warningText`	# c09853 e leng
`@warningBackground`	# f3edd2
`@errorText`	# b94a48 e le
`@errorBackground`	#f2dede
`@successText`	#468847 e le
`@successBackground`	# dff0d8
`@infoText`	# 3a87ad
`@infoBackground`	# d9edf7

Navbar

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

Di-dropdown tša go theoga

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

Yuniti ya mogale

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

Mabapi le mixins

Di-mixin tša motheo

Mixin ya motheo gabotse ke akaretša goba karolo ya seripa sa CSS. Di ngwadilwe go swana le sehlopha sa CSS gomme di ka bitšwa kae goba kae.

. elemente { .
  . go hlatswa ();
} .

Di-mixin tša parametriki

Mixin ya parametric e swana le mixin ya motheo, eupša e amogela gape ditekanyetšo (ka fao leina) ka dikelo tša go se fetoge tša boikhethelo.

. elemente { .
  . moedi - radius ( 4px );
} .

Eketsa ya gago gabonolo

Mo e nyakilego go ba di-mixin ka moka tša Bootstrap di bolokilwe ka go mixins.less, e lego faele e makatšago ya .less ya utility yeo e go kgontšhago go diriša mixin go efe goba efe ya difaele tša .less ka gare ga sedirišwa.

Ka fao, tšwela pele gomme o diriše tšeo di lego gona goba ikwe o lokologile go oketša tša gago ka moo o nyakago.

Di-mixin tšeo di akareditšwego

Didirišwa tša go thuša

Mixin	Ditekanyetšo	Tšhomišo
`.clearfix()`	ga go selo	Oketša go motswadi ofe goba ofe go hlatswa diphaphamadi ka gare
`.tab-focus()`	ga go selo	Diriša setaele sa go tsepamiša kgopolo sa Webkit le thulaganyo ya nkgokolo ya Firefox
`.center-block()`	ga go selo	Auto setsi a bolokoe-boemo ba elements sebelisa`margin: auto`
`.ie7-inline-block()`	ga go selo	Diriša go tlaleletša go ka mehla `display: inline-block`go hwetša thekgo ya IE7
`.size()`	`@height @width`	Beha ka potlako bophahamo le bophara moleng o le mong
`.square()`	`@size`	E aga godimo `.size()`go beakanya bophara le bophagamo bjalo ka boleng bjo bo swanago
`.opacity()`	`@opacity`	Beha, ka dinomoro tse feletseng, phesente ya opacity (mohlala, "50" kapa "75") .

Diforomo

Mixin	Ditekanyetšo	Tšhomišo
`.placeholder()`	`@color: @placeholderText`	Beakanya `placeholder`mmala wa sengwalwa bakeng sa ditseno

Go thaepa

Mixin	Ditekanyetšo	Tšhomišo
`#font > #family > .serif()`	ga go selo	Dira gore elemente e šomiše mokgobo wa fonte ya serif
`#font > #family > .sans-serif()`	ga go selo	Dira gore elemente e šomiše mokgobo wa fonte ya sans-serif
`#font > #family > .monospace()`	ga go selo	Dira gore elemente e šomiše mokgobo wa fonte ya sekgoba se tee
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Habonolo beha fonte boholo, boima, le etellang pele
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Beakanya lapa la fonte go serif, gomme o laole bogolo, boima, le go eta pele
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Beakanya lapa la fonte go sans-serif, gomme o laole bogolo, boima, le go eta pele
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Beakanya lapa la fonte go monospace, gomme o laole bogolo, boima, le go eta pele

Tshepedišo ya keriti

Mixin	Ditekanyetšo	Tšhomišo
`.container-fixed()`	ga go selo	Hlama setshelo seo se tsepamego ka go rapalala sa go swara diteng tša gago
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Hlagiša tshepedišo ya keriti ya dipiksele (setshelo, mothaladi, le dikholomo) ka n dikholomo le x pixel bophara gutter
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Hlagiša tshepedišo ya keriti ya phesente ka n dikholomo le x % ya sephara sa go tšhela meetse
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Hlahisa dipikselse keriti tsamaiso bakeng sa `input`elements, akhaonto bakeng sa padding le meeli
`.makeColumn`	`@columns: 1, @offset: 0`	Fetoša efe goba efe `div`go ba kholomo ya keriti ntle le `.span*`diklase

Dithoto tša CSS3

Mixin	Ditekanyetšo	Tšhomišo
`.border-radius()`	`@radius`	Round dikhutlo tsa elements. E ka ba boleng bjo tee goba dikelo tše nne tše di arotšwego ka sekgoba
`.box-shadow()`	`@shadow`	Oketša moriti wa go theoga go elemente
`.transition()`	`@transition`	Oketša phello ya phetogo ya CSS3 (mohlala, `all .2s linear`) .
`.rotate()`	`@degrees`	Dikološa elemente n likhato
`.scale()`	`@ratio`	Sekala elemente go n makga a bogolo bja yona bja mathomo
`.translate()`	`@x, @y`	Suthiša elemente godimo ga difofane tša x le y
`.background-clip()`	`@clip`	Sega mokokotlo wa elemente (e nago le mohola go `border-radius`) .
`.background-size()`	`@size`	Laola bogolo bja diswantšho tša ka morago ka CSS3
`.box-sizing()`	`@boxmodel`	Fetoša mohlala wa lepokisi bakeng sa elemente (mohlala, `border-box`bakeng sa bophara bjo bo tletšego `input`) .
`.user-select()`	`@select`	Laola kgetho ya khesara ya sengwalwa letlakaleng
`.backface-visibility()`	`@visibility: visible`	Thibela go phadima ga diteng ge o šomiša diphetogo tša CSS 3D
`.resizable()`	`@direction: both`	Dira gore elemente efe goba efe e fetoše bogolo ka go le letona le ka fase
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Dira gore diteng tša elemente efe goba efe di šomiše dikholomo tša CSS3
`.hyphens()`	`@mode: auto`	CSS3 hyphenation ge o e nyaka (e akaretša `word-wrap: break-word`) .

Dimelo le dikelo

Mixin	Ditekanyetšo	Tšhomišo
`#translucent > .background()`	`@color: @white, @alpha: 1`	Efa elemente mmala wa bokamorago wo o bonalago gabotse
`#translucent > .border()`	`@color: @white, @alpha: 1`	Efa elemente mmala wa mollwane wo o bonagalago
`#gradient > .vertical()`	`@startColor, @endColor`	Hlama sefapano-sephephediši sa go ema sa bokamorago
`#gradient > .horizontal()`	`@startColor, @endColor`	Hlama sefapano-sephephediši sa go rapalala sa bokamorago
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Hlama kelo ya morago ya tlhahlo ya sefapano-sephephediši
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Hlama sefapano-sephephediši sa mebala e meraro ya bokamorago
`#gradient > .radial()`	`@innerColor, @outerColor`	Hlama sefapano-sephephediši radial bokamorago gradient
`#gradient > .striped()`	`@color, @angle`	Hlama kelo ya morago ya methalo ya sefapano-sephephediši
`#gradientBar()`	`@primaryColor, @secondaryColor`	E šomišwa go dikonope go abela gradient le mollwane wo o lefsifsi go se nene

Ela hloko: Ge e le gore o romela kgopelo ya go goga go GitHub ka CSS ye e fetotšwego, o swanetše go kgoboketša CSS gape ka efe goba efe ya mekgwa ye.

Didirišwa tša go kgoboketša

Node le makefile

Tsenya mokgoboketši wa mola wa taelo wa LESS, JSHint, Recess, le uglify-js lefaseng ka bophara ka npm ka go sepetša taelo ye e latelago:

$ npm kenya -g ka tlase jshint sebaka uglify-js

Hang ha hlomamisa feela matha makeho tloha motso oa hao bootstrap directory le u kaofela behiloe.

Go tlaleletša, ge e ba o na le watchr yeo e hlomilwego, o ka kitima make watchgo ba le bootstrap yeo e agilwego lefsa ka go iketla nako le nako ge o rulaganya faele ka go bootstrap lib (se ga se nyakege, e fo ba mokgwa wa go ba bonolo).

Mola wa taelo

Tsenya sedirišwa sa mola wa taelo wa LESS ka Node gomme o sepetše taelo ye e latelago:

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

Kgonthiša gore o akaretša --compresska taelong yeo ge e ba o leka go boloka di-byte tše dingwe!

Javascript

Download Less.js ya moragorago gomme o akaretše tsela ya go ya go yona (le Bootstrap) go <head>.

<link rel = "letlakala la setaele/ka tlase" href = "/tsela/go/bootstrap.less" > <script src = "/tsela/go/ka tlase.js" ></script>

Go kgoboketša gape difaele tša .less, e no di boloka gomme o laetše letlakala la gago gape. Less.js e di kgoboketša gomme e di boloka polokelong ya lefelong leo.

Tiriso ye e sego ya semmušo ya Mac

Sedirišwa sa Mac seo e sego sa semmušo se lebelela dipuku tša difaele tša .less gomme se kgoboketša khoutu go difaele tša lefelong leo ka morago ga go boloka mo gongwe le mo gongwe ga faele ya .less yeo e bogetšwego.

Ge o rata, o ka fetoša dikgetho ka go tirišo bakeng sa go fokotša ka go itiriša le gore ke tšhupetšo efe yeo difaele tše di kgobokeditšwego di feleletšago di le go yona.

E agilwe ka LESS

Ke ka baka la’ng go le ka tlase ga moo?

Ke eng seo se akaretšwago?

Ithute ka botlalo

Diphetogo

Ditswaki

Ditiro tša go šoma

Diphetogo tša bootstrap LESS diphetogo, boleng bja tšona, le ditlhahlo tša tšhomišo

Scaffolding le dikgokelo

Tshepedišo ya keriti

Go thaepa

Ditafola

Mebala ya sekala sa bohlooho

Mebala ya accent

Dikarolo

Dikonope

Diforomo

Foromo e re le ditemošo

Navbar

Di-dropdown tša go theoga

Yuniti ya mogale

Di-mixin tša bootstrap

Mabapi le mixins

Di-mixin tša motheo

Di-mixin tša parametriki

Eketsa ya gago gabonolo

Di-mixin tšeo di akareditšwego

Didirišwa tša go thuša

Diforomo

Go thaepa

Tshepedišo ya keriti

Dithoto tša CSS3

Dimelo le dikelo

Go kgoboketša Bootstrap ka LESS

Didirišwa tša go kgoboketša

Node le makefile

Mola wa taelo

Javascript

Tiriso ye e sego ya semmušo ya Mac

Ditirišo tše dingwe tša Mac

Crunch ya go kgahla

Kit ya Khoutu

Go hloka bonolo