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.
E agilwe ka LESS
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.
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.
Diphetogo tša bootstrap LESS diphetogo, boleng bja tšona, le ditlhahlo tša tšhomišo
Dikgokagano tša go feta
@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
@baseFontSize |
13px e le |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px e le |
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
@primaryButtonBackground |
@linkColor |
Diforomo
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px e le | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
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 |
Di-mixin tša bootstrap
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 gape e amogela 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 sebelisamargin: auto |
.ie7-inline-block() |
ga go selo | Diriša go tlaleletša go ka mehla display: inline-blockgo hwetša thekgo ya IE7 |
.size() |
@height: 5px, @width: 5px |
Beha ka potlako bophahamo le bophara moleng o le mong |
.square() |
@size: 5px |
E aga godimo .size()go beakanya bophara le bophagamo bjalo ka boleng bjo bo swanago |
.opacity() |
@opacity: 100 |
Beha, ka dinomoro tse feletseng, phesente ya opacity (mohlala, "50" kapa "75") . |
Diforomo
| Mixin | Ditekanyetšo | Tšhomišo |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Beakanya placeholdermmala 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 |
Beha habonolo boholo ba fonte, boima, le e 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 morago bjale ka dikholomo tše n le x % ya go tšhela ka bophara |
Dithoto tša CSS3
| Mixin | Ditekanyetšo | Tšhomišo |
|---|---|---|
.border-radius() |
@radius: 5px |
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: 0 1px 3px rgba(0,0,0,.25) |
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: 0, @y: 0 |
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-boxbakeng sa bophara bjo bo tletšego input) . |
.user-select() |
@select |
Laola kgetho ya khesara ya sengwalwa letlakaleng |
.resizable() |
@direction: both |
Dira gore elemente efe goba efe e fetoše bogolo ka go le letona le ka fase |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Dira gore diteng tša elemente efe goba efe di šomiše dikholomo tša CSS3 |
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 |
Go kgoboketša Bootstrap ka LESS
Didirišwa tša go kgoboketša
Node le makefile
Tsenya mokgoboketši wa mola wa taelo wa LESS le uglify-js lefaseng ka bophara ka npm ka go sepetša taelo ye e latelago:
$ npm kenya -g ka tlase 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 ./lib / 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.
Ditirišo tše dingwe tša Mac
Crunch ya go kgahla
Crunch ke morulaganyi le mokgoboketši wa go lebelega kudu wa LESS wo o agilwego go Adobe Air.
Kit ya Khoutu
E hlotšwe ke mošemane yo a swanago le tirišo ya Mac yeo e sego ya semmušo, CodeKit ke tirišo ya Mac yeo e kgoboketšago LESS, SASS, Stylus, le CoffeeScript.
Go hloka bonolo
Mac, Linux, le PC tiriso ye bakeng sa hula le lahlela bokella ya difaele LESS. Plus, khoutu ya mohlodi e ka GitHub .