Jijjiiramoota, mixins, fi kanneen biroo CSS Bootstrap ijaaruuf fayyadaman fayyadamuuf LESS , durtii CSS waliin Bootstrap dhuunfachiisi fi dheeressi .
Bootstrap kan hojjetame LESS at it's core, afaan stylesheet daayinamikii hiriyyaa keenya gaarii, Alexis Sellier tiin uumame . CSS sirna irratti hundaa'e hojjechuu saffisaa, salphaa fi bashannansiisaa taasisa.
Akka dheerina CSS, LESS jijjiiramoota, mixins cuquliisa koodii irra deebi'amee fayyadamuu danda'aniif, hojiiwwan herrega salphaa, man'ee, fi illee faankishiniiwwan halluu of keessatti qabata.
Halluuwwanii fi gatiiwwan piikselii CSS keessatti bulchuun xiqqoo dhukkubbii ta'uu danda'a, yeroo baay'ee waraabbii fi maxxansiin guutame. LESS waliin miti haa ta'u malee—halluuwwan ykn gatiiwwan piikselii akka jijjiiramootaatti ramadiitii al tokko jijjiiri.
Warra sadan daangaa-radius labsii idilee ol' CSS keessatti gochuu qabdu? Amma gargaarsa mixins, snippets koodii bakka barbaaddetti irra deebitee fayyadamuu dandeessuun sarara tokkotti gadi bu'aniiru.
Herrega balali'aa irratti hojiiwwan waliin hojjechuun giiridii kee, dursaa, fi caalaatti super flexible godhi. Karaa kee gara CSS sanity baay'isi, qoodi, itti dabali, fi hir'isi.
@linkColor |
#08c jedhama | Halluu barruu hidhaa durtii | |
@linkColorHover |
darken(@linkColor, 15%) |
Halluu hover barruu hidhaa durtii |
@gridColumns |
12. |
@gridColumnWidth |
60px ta'a |
@gridGutterWidth |
20px ta'a |
@fluidGridColumnWidth |
6.382978723% ta'a. |
@fluidGridGutterWidth |
2.127659574% ta'a. |
@baseFontSize |
13px ta'a | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18px ta'a |
@black |
#000 ta'a | |
@grayDarker |
#222. #222 | |
@grayDark |
#333 irratti | |
@gray |
#555 irratti | |
@grayLight |
#999 irratti | |
@grayLighter |
#eee | |
@white |
#fff |
@blue |
#049cdb jedhamtu | |
@green |
#46a546 irratti | |
@red |
#9d261d jedhama | |
@yellow |
#ffc40d jedhaa | |
@orange |
#f89406 jedhamti | |
@pink |
#c3325f jedhama | |
@purple |
#7a43b6 irratti |
@primaryButtonBackground |
@linkColor |
@placeholderText |
@grayLight |
@navbarHeight |
40px ta'a | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
@warningText |
#f3edd2 jedhu | |
@warningBackground |
#c09853 jedhu | |
@errorText |
#b94a48 irratti | |
@errorBackground |
#f2dede jedhu | |
@successText |
#468847 irratti argama | |
@successBackground |
#dff0d8 jedhu | |
@infoText |
#3a87ad jedhaa | |
@infoBackground |
#d9edf7 jedhu |
Miksiin bu'uuraa bu'uuraan hammachuu ykn gartokkee citaa CSS tiif. Isaanis akkuma kutaa CSS kan barreeffamanii fi bakka kamittiyyuu waamamuu danda'u.
- . elementii { .
- . qulqulleessuu ();
- } .
Miksiin paarameetrikii akkuma makaa bu'uuraati, garuu akkasumas qajoojiiwwan (kanarraa ka'uun maqaa) gatiiwwan durtii filannoo waliin fudhata.
- . elementii { .
- . daangaa - raadiyaasii ( 4px );
- } .
Miksiin Bootstrap hundi jechuun ni danda'ama mixins.less keessatti kuufamaniiru, faayilii .less faayidaa ajaa'ibaa kan faayiloota .less meeshaa keessa jiran kamiyyuu keessatti mixin fayyadamuu si dandeessisu.
Kanaafuu, itti fufaatii kanneen jiran fayyadamaa ykn akka barbaaddanitti kan keessan itti dabaluuf bilisa ta'aa.
Mixin jedhama | Parameetaroota | Fayyadama |
---|---|---|
.clearfix() |
homaa | Keessatti lola'oo qulqulleessuuf warra kamiyyuutti dabali |
.tab-focus() |
homaa | Akkaataa xiyyeeffannoo Webkit fi sarara Firefox geengoo hojii irra oolchi |
.center-block() |
homaa | Ofiin giddugaleessa elementii sadarkaa bilookii fayyadamuunmargin: auto |
.ie7-inline-block() |
homaa | display: inline-block Deeggarsa IE7 argachuuf idilee irratti dabalataan fayyadamaa |
.size() |
@height: 5px, @width: 5px |
Dafii olka'iinsaa fi bal'ina sarara tokko irratti saagi |
.square() |
@size: 5px |
.size() Bal'ina fi olka'iinsa akka gatii walfakkaataatti saaguuf irratti ijaara |
.opacity() |
@opacity: 100 |
Saagi, lakkoofsota guutuu keessatti, dhibbeentaa opacity (fkn, "50" ykn "75") . |
Mixin jedhama | Parameetaroota | Fayyadama |
---|---|---|
.placeholder() |
@color: @placeholderText |
placeholder Halluu barruu galteewwaniif saagi |
Mixin jedhama | Parameetaroota | Fayyadama |
---|---|---|
#font > #family > .serif() |
homaa | Qaamni tokko tuullaa qubee serif akka fayyadamu godhi |
#font > #family > .sans-serif() |
homaa | Qaamni tokko tuullaa qubee sans-serif akka fayyadamu godhi |
#font > #family > .monospace() |
homaa | Qaamni tokko tuullaa qubee iddoo tokkoo akka fayyadamu godhi |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Salphaatti guddina qubee, ulfaatina, fi dursaa saagi |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Maatii qubee gara serif saagi, fi hammangaa, ulfaatina, fi dursaa to'adhu |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Maatii qubee gara sans-serif saagi, fi hammangaa, ulfaatina, fi dursaa to'adhu |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Maatii qubee gara iddoo tokkootti saagi, fi hammangaa, ulfaatina, fi dursaa to'adhu |
Mixin jedhama | Parameetaroota | Fayyadama |
---|---|---|
.container-fixed() |
homaa | @siteWidth Qabiyyee kee qabachuuf qabduu bal'ina dhaabbataa (wajjiin saagi ) kenni |
.columns() |
@columns: 1 |
Tarjaa tarjaa lakkoofsa tarjaa kamiyyuu diriirsu ijaari (durtii gara tarjaa 1tti) . |
.offset() |
@columns: 1 |
Tarjaa tarjaa qarqara bitaa kan lakkoofsa tarjaa kamiyyuu dabarsu waliin ofseet |
.gridColumn() |
homaa | Elementii akka tarjaa tarjaa akka yaa'u godhi |
Mixin jedhama | Parameetaroota | Fayyadama |
---|---|---|
.border-radius() |
@radius: 5px |
Goleewwan elementii tokkoo naannessi. Gatii tokko ykn gatiiwwan afur iddoo addaan baafaman ta'uu danda'a |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Gaaddidduu kufaatii elementii tokkotti dabali |
.transition() |
@transition |
Bu'aa ce'umsaa CSS3 dabali (fkn, all .2s linear ) . |
.rotate() |
@degrees |
Elementii tokko digrii n naannessi |
.scale() |
@ratio |
Elementii tokko gara dachaa n guddina jalqabaa isaatti iskeelii godhi |
.translate() |
@x: 0, @y: 0 |
Elementii xiyyaarota x fi y irratti sochoosi |
.background-clip() |
@clip |
Duubbee elementii tokkoo muraa (f faayidaa qaba border-radius ) . |
.background-size() |
@size |
Hammangaa fakkiiwwan duubbee karaa CSS3 to'adhu |
.box-sizing() |
@boxmodel |
Moodeela saanduqa qaama tokkoof jijjiiri (fkn, border-box bal'ina guutuuf input ) . |
.user-select() |
@select |
Filannoo qaree barruu fuula irratti to'adhu |
.resizable() |
@direction: both |
Elementii kamiyyuu mirgaa fi jalaan guddina akka jijjiiramu godhi |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Qabiyyeen elementii kamiyyuu tarjaawwan CSS3 akka fayyadamu taasisi |
Mixin jedhama | Parameetaroota | Fayyadama |
---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
Elementii tokkoof halluu duubbee ifa ta'e kenni |
.#translucent > .border() |
@color: @white, @alpha: 1 |
Elementii tokkoof halluu daangaa ifaa kenni |
.#gradient > .vertical() |
@startColor, @endColor |
Gargaarsa duubbee dhaabbataa qaxxaamuraa-browsarii uumi |
.#gradient > .horizontal() |
@startColor, @endColor |
Jijjiirama duubbee qajeelaa qaxxaamuraa-browsarii uumi |
.#gradient > .directional() |
@startColor, @endColor, @deg |
Garaagarummaa duubbee kallattii qaxxaamuraa-browzarii uumi |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Gargalcha duubbee halluu sadii qaxxaamuraa-browzarii uumi |
.#gradient > .radial() |
@innerColor, @outerColor |
Jijjiirama duubbee raadiyaalii qaxxaamuraa-browzarii uumi |
.#gradient > .striped() |
@color, @angle |
Garaagarummaa duubbee sarara qaxxaamuraa-browzarii uumi |
.#gradientBar() |
@primaryColor, @secondaryColor |
Qabduulee garagalchaa fi daangaa xiqqoo dukkanaa'aa ramaduuf fayyadama |
Ajaja armaan gadii hojjechuudhaan qindeessaa sarara ajajaa LESS npm waliin fe'i:
$ npm xiqqaa fe'i
make
Erga fe'amtee booda hundee galmee bootstrap kee irraa qofa fiiguu fi hundi kee qophaa'aa jirta.
Dabalataan, yoo watchr fe'atte, make watch
yeroo faayilii bootstrap lib keessatti gulaaltu hunda bootstrap ofumaan akka deebi'ee ijaaramu gochuuf fiiguu dandeessa (kun hin barbaachisu, mala mijataa qofa).
Meeshaa sarara ajajaa LESS karaa Node fe'iitii ajaja armaan gadii hojjedhu:
$ lessc ./lib/bootstrap.less > jalqabbii.css
--compress
Yoo baayitii tokko tokko qusachuuf yaaltu ajaja sana keessatti hammachuu kee mirkaneessi !
Less.js isa haaraa buufadhuutii daandii gara isaatti geessu (fi Bootstrap) <head>
.
<link rel = "waraqaa akkaataa/xiqqaa" href = "/karaa/gara/bootstrap.xiqqaa" > <script src = "/karaa/gara/xiqqaa.js" ></script>
Faayilota .less irra deebi'anii qindeessuuf, save gochuu qofaafi fuula kee irra deebi'ii fe'i. Less.js isaan qindeessee kuusaa naannoo keessatti kuufata.
Appiin Mac hin ofiisaa ta'e galmeewwan faayiloota .less ilaalaa fi koodii gara faayiloota naannootti qindeessa erga faayila .less ilaalame qusachuu hunda booda.
Yoo jaallatte, filannoowwan appii keessa jiran jijjiiruun ofumaan xiqqeessuu fi faayiloota qindaa'an galmee kam keessatti akka xumuraman gochuu dandeessa.
Crunch gulaalaa fi qindeessaa LESS guddaa fakkaatu kan Adobe Air irratti ijaarameedha.
Gurbaa appii Mac hin ofiisaa ta'een kan uumame CodeKit appii Mac kan LESS, SASS, Stylus, fi CoffeeScript qindeessuudha.
Mac, Linux, fi PC app faayiloota LESS harkisuu fi gadi dhiisuuf qindeessuuf gargaaru. Dabalataan, koodii maddi GitHub irratti argama .