Okukozesa LESS ne Bootstrap

Customize era okugaziya Bootstrap ne LESS , CSS preprocessor, okweyambisa enkyukakyuka, mixins, n'ebirala ebikozesebwa okuzimba Bootstrap's CSS.

Lwaki LESS?

Bootstrap ekoleddwa ne LESS ku musingi gwayo, olulimi lwa stylesheet olukyukakyuka olwakolebwa mukwano gwaffe omulungi, Alexis Sellier . Kifuula okukola CSS eyesigamiziddwa ku nkola okwangu, okwangu, era okusanyusa.

Kiki ekirimu?

Nga ekyongereza kya CSS, LESS erimu enkyukakyuka, mixins ez’ebitundutundu bya koodi ebiddamu okukozesebwa, emirimu gy’okubala okwangu, okuteeka ebisu, n’emirimu gya langi.

Manya ebisingawo

Kyalira omukutu omutongole ku http://lesscss.org/ okumanya ebisingawo.

Enkyukakyuka ezikyukakyuka

Okuddukanya langi n’emiwendo gya pixel mu CSS kiyinza okuluma akatono, ebiseera ebisinga nga kijjudde okukoppa n’okuteeka. Si ne LESS wadde —gaba langi oba emiwendo gya pixel nga enkyukakyuka era ozikyuse omulundi gumu.

Ebirungo ebitabuddwa

Ezo ssatu border-radius declarations olina okukola mu regular ol' CSS? Kati zikka ku layini emu nga ziyambibwako mixins, snippets za code z'osobola okuddamu okukozesa wonna.

Ebikwekweto

Fuula grid yo, okukulembera, n'okusinga super flexible nga okola math ku fly n'emirimu. Kubisaamu, gabana, gattako, era oggyeko ekkubo lyo erigenda ku CSS sanity.

Scaffolding n’ebiyungo

`@bodyBackground`	`@white`	Langi y’emabega w’olupapula
`@textColor`	`@grayDark`	Langi y'ebiwandiiko eya bulijjo ey'omubiri gwonna, emitwe, n'ebirala
`@linkColor`	`#08c`	Langi y'ebiwandiiko by'enkolagana eya bulijjo
`@linkColorHover`	`darken(@linkColor, 15%)`	Default link ekiwandiiko hover langi

Enkola ya grid

`@gridColumns`	12. 12
`@gridColumnWidth`	60px nga bwe kiri
`@gridGutterWidth`	20px nga bwe kiri
`@fluidGridColumnWidth`	6.382978723% nga bwe kiri.
`@fluidGridGutterWidth`	2.127659574% nga bwe kiri.

Okuwandiika ebitabo

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, nga tewali kituufu
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Omubaka Omupya", ekifo kimu
`@baseFontSize`	13px nga bwe kiri	Alina okuba nga pixels
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px nga bwe kiri	Alina okuba nga pixels
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Emmeeza

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

Langi za langi enzirugavu

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

Langi za ‘accent’

`@blue`	#049cdb nga bwe kiri
`@green`	#46a546 nga bwe kiri
`@red`	#9d261d nga bwe kiri
`@yellow`	#ffc40d nga bwe kiri
`@orange`	#f89406 nga bwe kiri
`@pink`	#c3325f
`@purple`	#7a43b6 nga bwe kiri

Ebitundu ebikola omubiri

Ebikondo ebiyitibwa Buttons

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

Ffoomu

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

Foomu embeera n’okulabula

`@warningText`	#c09853 nga bwe kiri
`@warningBackground`	#f3edd2
`@errorText`	#b94a48 nga bwe kiri
`@errorBackground`	#f2dede
`@successText`	#468847 nga bwe kiri
`@successBackground`	#dff0d8 nga bwe kiri
`@infoText`	#3a87okulangirira
`@infoBackground`	#d9edf7

Navbar

`@navbarHeight`	40px nga bwe kiri
`@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`

Ebintu ebigwa wansi

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

Ekitundu ky’omuzira

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

Ebikwata ku mixins

Ebikozesebwa ebisookerwako (basic mixins).

Mixin enkulu mu bukulu ye include oba partial ku snippet ya CSS. Ziwandiikibwa nga kiraasi ya CSS era zisobola okuyitibwa wonna.

. elementi { .
  . okutereeza obulungi ();
} .

Ebikozesebwa mu kutabula (parametric mixins).

Parametric mixin eringa basic mixin, naye era ekkiriza parameters (wano we wava erinnya) n'emiwendo egy'enjawulo egy'okwesalirawo.

. elementi { .
  . ensalosalo - radius ( 4px );
} .

Kyangu okugattako ebibyo

Kumpi mixins zonna eza Bootstrap ziterekebwa mu mixins.less, fayiro ey’ekitalo ey’omugaso .less ekusobozesa okukozesa mixin mu fayiro yonna eya .less mu kitabo ky’ebikozesebwa.

Kale, genda mu maaso okozese ebiriwo oba wulira nga oli waddembe okugattako ebibyo nga bwe weetaaga.

Mulimu ebirungo ebiyitibwa mixins

Ebikozesebwa

Mixin	Ebipimo (parameters).	Enkozesa
`.clearfix()`	tewali	Okwongerako ku muzadde yenna okulongoosa floats munda
`.tab-focus()`	tewali	Kozesa omusono gw'okussa essira ku Webkit n'ensengeka ya Firefox eyeetooloovu
`.center-block()`	tewali	Auto center ekintu eky’omutendera gwa bulooka nga okozesa`margin: auto`
`.ie7-inline-block()`	tewali	Kozesa nga kwotadde ne bulijjo `display: inline-block`okufuna obuwagizi bwa IE7
`.size()`	`@height @width`	Teeka mangu obuwanvu n’obugazi ku layini emu
`.square()`	`@size`	Azimba ku `.size()`okuteeka obugazi n'obugulumivu nga omuwendo gwe gumu
`.opacity()`	`@opacity`	Teeka, mu namba enzijuvu, ebitundu ku kikumi eby'obutatangaavu (okugeza, "50" oba "75")

Ffoomu

Mixin	Ebipimo (parameters).	Enkozesa
`.placeholder()`	`@color: @placeholderText`	Teeka `placeholder`langi y'ekiwandiiko ku biyingizibwa

Okuwandiika ebitabo

Mixin	Ebipimo (parameters).	Enkozesa
`#font > #family > .serif()`	tewali	Kola elementi okukozesa serif font stack
`#font > #family > .sans-serif()`	tewali	Kola elementi okukozesa sans-serif font stack
`#font > #family > .monospace()`	tewali	Kola elementi okukozesa monospace font stack
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Kyangu okuteeka sayizi y'empandiika, obuzito, n'okukulembera
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Teeka ekika ky'empandiika ku serif, era ofuge obunene, obuzito, n'okukulembera
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Teeka ekika ky'empandiika ku sans-serif, era ofuge obunene, obuzito, n'okukulembera
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Teeka ekika ky'empandiika ku kifo kimu, era ofuge obunene, obuzito, n'okukulembera

Enkola ya grid

Mixin	Ebipimo (parameters).	Enkozesa
`.container-fixed()`	tewali	Tonda ekintu ekiri wakati mu bbanga eky’okukwata ebirimu byo
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Okukola enkola ya pixel grid (container, row, ne columns) nga erina empagi n ne x pixel wide gutter
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Okukola enkola ya grid ku buli kikumi nga erina empagi n ne x % wide gutter
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Okukola enkola ya pixel grid ku `input`elementi, okubala ku padding ne borders
`.makeColumn`	`@columns: 1, @offset: 0`	Fuula yonna `div`mu grid column nga tewali `.span*`classes

Ebintu bya CSS3

Mixin	Ebipimo (parameters).	Enkozesa
`.border-radius()`	`@radius`	Weetooloole enkoona za elementi. Kiyinza okuba omuwendo gumu oba emiwendo ena egyawuddwamu ebbanga
`.box-shadow()`	`@shadow`	Okwongerako ekisiikirize ekitonnya ku elementi
`.transition()`	`@transition`	Okwongerako CSS3 enkyukakyuka effect (okugeza, `all .2s linear`) .
`.rotate()`	`@degrees`	Zingulula elementi n diguli
`.scale()`	`@ratio`	Sikaani elementi okutuuka ku n emirundi n obunene bwayo obw’olubereberye
`.translate()`	`@x, @y`	Tambuza elementi ku nnyonyi za x ne y
`.background-clip()`	`@clip`	Salako emabega w'ekintu (eky'omugaso eri `border-radius`) .
`.background-size()`	`@size`	Fuga obunene bw'ebifaananyi eby'emabega ng'oyita mu CSS3
`.box-sizing()`	`@boxmodel`	Kyusa ekifaananyi ky'ekibokisi ku elementi (okugeza, `border-box`ku full-width `input`) .
`.user-select()`	`@select`	Fuga cursor okulonda ebiwandiiko ku lupapula
`.backface-visibility()`	`@visibility: visible`	Okuziyiza okuwuuma kw’ebirimu ng’okozesa enkyukakyuka za CSS 3D
`.resizable()`	`@direction: both`	Fuula elementi yonna ekyusibwa obunene ku ddyo ne wansi
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Fuula ebirimu mu elementi yonna okukozesa ennyiriri za CSS3
`.hyphens()`	`@mode: auto`	CSS3 hyphenation nga oyagala (mulimu `word-wrap: break-word`) .

Ebifaananyi eby’emabega n’ebigenda mu maaso

Mixin	Ebipimo (parameters).	Enkozesa
`#translucent > .background()`	`@color: @white, @alpha: 1`	Wa elementi langi y’emabega etangalijja
`#translucent > .border()`	`@color: @white, @alpha: 1`	Wa elementi langi y’ensalosalo etangalijja
`#gradient > .vertical()`	`@startColor, @endColor`	Tonda ekifaananyi ky’emabega ekyesimbye eky’omusalaba-browser
`#gradient > .horizontal()`	`@startColor, @endColor`	Tonda ekifaananyi eky'omusalaba-browser horizontal background gradient
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Tonda ekifaananyi eky’okusalako-browser eky’obulagirizi eky’emabega
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Tonda cross-browser eya langi ssatu gradient y'emabega
`#gradient > .radial()`	`@innerColor, @outerColor`	Tonda ekifaananyi kya cross-browser radial background gradient
`#gradient > .striped()`	`@color, @angle`	Tonda ekifaananyi eky’emabega eky’emisono egy’omusalaba-browser
`#gradientBar()`	`@primaryColor, @secondaryColor`	Ekozesebwa ku buttons okugaba gradient ne border enzirugavu katono

Note: Bw'oba oweereza okusaba okusika ku GitHub ne CSS ekyusiddwa, olina okuddamu okukung'aanya CSS ng'oyita mu nkola yonna ku zino.

Ebikozesebwa mu kukungaanya

Node nga eriko makefile

Teeka omukung'aanya w'ennyiriri z'ekiragiro LESS, JSHint, Recess, ne uglify-js mu nsi yonna ne npm ng'okola ekiragiro kino wammanga:

$ npm okuteeka -g ekitono jshint okuwummulamu uglify-js

Bw'omala okussaako dduka budduka makeokuva ku kikolo kya bootstrap directory yo era mwenna muba otegese.

Okugatta ku ekyo, bw’oba olina watchr gy’ossaako, oyinza okudduka make watchokubeera ne bootstrap okuddamu okuzimbibwa mu ngeri ey’otoma buli lw’olongoosa fayiro mu bootstrap lib (kino tekikyetaagisa, nkola ya kukwanguyiza yokka).

Ennyiriri z’ekiragiro

Teeka ekintu kya LESS command line tool ng'oyita mu Node era okole ekiragiro kino wammanga:

$ lessc ./less/okutandika.less > okutandika.css

Kakasa nti ossaamu --compressmu kiragiro ekyo bw'oba ogezaako okutereka bytes ezimu!

Javascript

Wano wefunire Less.js eyasembyeyo era oteekemu ekkubo erigenda mu yo (ne Bootstrap) mu <head>.

<link rel = "olupapula lw'omulembe/ekitono" href = "/ekkubo/okugenda/bootstrap.less" > <script src = "/ekkubo/okugenda/okutono.js" ></script>

Okuddamu okukung’aanya fayiro za .less, omala kuzitereka n’oddamu okutikka omuko gwo. Less.js ezikuŋŋaanya n’ezitereka mu kutereka okw’omu kitundu.

App etali ntongole eya Mac

App ya Mac etali ntongole etunuulira dayirekita za fayiro za .less era ekuŋŋaanya koodi mu fayiro z’omu kitundu oluvannyuma lwa buli kutereka fayiro ya .less etunuuliddwa.

Bw’oba oyagala, osobola okukyusakyusa by’oyagala mu app okusobola okukendeeza mu ngeri ey’otoma ne dayirekita ki fayiro ezikung’aanyiziddwa gye zikoma mu.

Yazimbibwa ne LESS

Lwaki LESS?

Kiki ekirimu?

Manya ebisingawo

Enkyukakyuka ezikyukakyuka

Ebirungo ebitabuddwa

Ebikwekweto

Bootstrap variables LESS enkyukakyuka, emiwendo gyazo, n'ebiragiro by'enkozesa

Scaffolding n’ebiyungo

Enkola ya grid

Okuwandiika ebitabo

Emmeeza

Langi za langi enzirugavu

Langi za ‘accent’

Ebitundu ebikola omubiri

Ebikondo ebiyitibwa Buttons

Ffoomu

Foomu embeera n’okulabula

Navbar

Ebintu ebigwa wansi

Ekitundu ky’omuzira

Ebikozesebwa mu kukola bootstrap

Ebikwata ku mixins

Ebikozesebwa ebisookerwako (basic mixins).

Ebikozesebwa mu kutabula (parametric mixins).

Kyangu okugattako ebibyo

Mulimu ebirungo ebiyitibwa mixins

Ebikozesebwa

Ffoomu

Okuwandiika ebitabo

Enkola ya grid

Ebintu bya CSS3

Ebifaananyi eby’emabega n’ebigenda mu maaso

Okukunganya Bootstrap ne LESS

Ebikozesebwa mu kukungaanya

Node nga eriko makefile

Ennyiriri z’ekiragiro

Javascript

App etali ntongole eya Mac

Apps endala eza Mac

Crunch nga bwe kiri

CodeKit

Simpless