Gnàthaich agus leudaich Bootstrap le LESS , preprocessor CSS, gus brath a ghabhail air na caochladairean, measgachadh agus barrachd a thathas a’ cleachdadh gus CSS Bootstrap a thogail.
Tha Bootstrap air a dhèanamh le LESS aig a chridhe, cànan duilleag stoidhle fiùghantach a chruthaich ar deagh charaid, Alexis Sellier . Bidh e a’ dèanamh leasachadh CSS stèidhichte air siostaman nas luaithe, nas fhasa agus nas spòrsail.
Mar leudachadh air CSS, tha LESS a’ toirt a-steach caochladairean, measgachadh airson criomagan còd ath-chleachdadh, gnìomhachd airson gnìomhan matamataigs sìmplidh, neadachadh, agus eadhon dath.
Tadhail air an làrach-lìn oifigeil aig http://lesscss.org/ gus tuilleadh ionnsachadh.
Faodaidh riaghladh dathan agus luachan piogsail ann an CSS a bhith na phian, mar as trice làn leth-bhreac agus pasgain. Chan ann le LESS ge-tà - sònraich dathan no luachan piogsail mar chaochladairean agus atharraich iad aon uair.
Na trì dearbhaidhean radius crìche sin a dh’ fheumas tu a dhèanamh ann an CSS cunbhalach? A-nis tha iad sìos gu aon loidhne le cuideachadh bho mixins, criomagan de chòd as urrainn dhut ath-chleachdadh an àite sam bith.
Dèan do ghriod, a 'stiùireadh, agus nas sùbailte le bhith a' dèanamh matamataigs air an itealan le gnìomhachd. Iomadaich, roinneadh, cuir ris agus thoir air falbh do shlighe gu slàinteachas CSS.
@linkColor |
#08c | Dath teacsa ceangail bunaiteach | |
@linkColorHover |
darken(@linkColor, 15%) |
Dath hover teacsa ceangail bunaiteach |
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574 % |
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eeee | |
@white |
#fff |
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
@primaryButtonBackground |
@linkColor |
@placeholderText |
@grayLight |
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2ded | |
@successText |
#468847 | |
@successBackground |
#df0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Tha measgachadh bunaiteach gu bunaiteach mar phàirt no pàirt airson criomag de CSS. Tha iad sgrìobhte dìreach mar chlas CSS agus faodar an gairm an àite sam bith.
- . eileamaid {
- . soilleir ();
- }
Tha measgachadh parametric dìreach mar mheasgachadh bunaiteach, ach tha e cuideachd a’ gabhail ri paramadairean (mar sin an t-ainm) le luachan bunaiteach roghainneil.
- . eileamaid {
- . chrìoch - radius ( 4px );
- }
Tha cha mhòr a h-uile gin de mheasgachadh Bootstrap air a stòradh ann am mixins.less, goireas mìorbhaileach .less faidhle a leigeas leat mixin a chleachdadh ann an gin de na faidhlichean .less san inneal.
Mar sin, rachaibh air adhart agus cleachd an fheadhainn a th’ ann no faodaidh tu do chuid fhèin a chuir ris mar a dh ’fheumas tu.
Measgachadh | Paramadairean | Cleachdadh |
---|---|---|
.clearfix() |
gin | Cuir ri pàrant sam bith gus flotaichean a ghlanadh a-staigh |
.tab-focus() |
gin | Cuir an stoidhle fòcas Webkit an sàs agus geàrr-chunntas timcheall Firefox |
.center-block() |
gin | Ionad gu fèin-ghluasadach eileamaid ìre bloc a’ cleachdadhmargin: auto |
.ie7-inline-block() |
gin | Cleachd a bharrachd air cunbhalach display: inline-block gus taic IE7 fhaighinn |
.size() |
@height: 5px, @width: 5px |
Suidhich gu sgiobalta an àirde agus an leud air aon loidhne |
.square() |
@size: 5px |
Togail air adhart .size() gus an leud agus an àirde a shuidheachadh leis an aon luach |
.opacity() |
@opacity: 100 |
Suidhich, ann an àireamhan slàn, an ceudad neo-sheasmhachd (me, "50" no "75") |
Measgachadh | Paramadairean | Cleachdadh |
---|---|---|
.placeholder() |
@color: @placeholderText |
Suidhich placeholder dath an teacsa airson cuir a-steach |
Measgachadh | Paramadairean | Cleachdadh |
---|---|---|
#font > #family > .serif() |
gin | Dèan eileamaid a’ cleachdadh stac cruth-clò serif |
#font > #family > .sans-serif() |
gin | Dèan eileamaid a’ cleachdadh cruach cruth-clò sans-serif |
#font > #family > .monospace() |
gin | Dèan eileamaid a’ cleachdadh cruach cruth-clò monospace |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Suidhich gu furasta meud cruth-clò, cuideam, agus stiùir |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Suidhich teaghlach cruth-clò gu serif, agus smachd a chumail air meud, cuideam agus stiùireadh |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Suidhich teaghlach cruth-clò gu sans-serif, agus smachd a chumail air meud, cuideam agus stiùireadh |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Suidhich teaghlach cruth-clò gu monospace, agus smachd a chumail air meud, cuideam agus stiùireadh |
Measgachadh | Paramadairean | Cleachdadh |
---|---|---|
.container-fixed() |
gin | Thoir seachad soitheach leud stèidhichte (seata le @siteWidth ) airson do shusbaint a chumail |
.columns() |
@columns: 1 |
Tog colbh clèithe a tha a 'dol thairis air àireamh sam bith de cholbhan (roghainnean bunaiteach gu 1 colbh) |
.offset() |
@columns: 1 |
Cuir dheth colbh clèithe le iomall clì a tha a’ spangachadh àireamh sam bith de cholbhan |
.gridColumn() |
gin | Dèan eileamaid air bhog mar cholbh clèithe |
Measgachadh | Paramadairean | Cleachdadh |
---|---|---|
.border-radius() |
@radius: 5px |
Timcheall air oiseanan eileamaid. Faodaidh e a bhith na aon luach no ceithir luachan eadar-dhealaichte |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Cuir sgàil drop ri eileamaid |
.transition() |
@transition |
Cuir ris buaidh gluasaid CSS3 (me, all .2s linear ) |
.rotate() |
@degrees |
Rothaich eileamaid n ceuman |
.scale() |
@ratio |
Sgèile eileamaid gu n uair a mheud tùsail |
.translate() |
@x: 0, @y: 0 |
Gluais eileamaid air na plèanaichean x agus y |
.background-clip() |
@clip |
Bàrr cùl-raon eileamaid (feumail airson border-radius ) |
.background-size() |
@size |
Smachd air meud ìomhaighean cùil tro CSS3 |
.box-sizing() |
@boxmodel |
Atharraich am modail bogsa airson eileamaid (me, border-box airson làn-leud input ) |
.user-select() |
@select |
Smachd cùrsair taghadh teacsa air duilleag |
.resizable() |
@direction: both |
Dèan eileamaid sam bith ath-mheudachadh air an làimh dheis agus gu h-ìosal |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Dèan susbaint eileamaid sam bith a’ cleachdadh colbhan CSS3 |
Measgachadh | Paramadairean | Cleachdadh |
---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
Thoir dath cùl-raoin thar-shoilleir dha eileamaid |
.#translucent > .border() |
@color: @white, @alpha: 1 |
Thoir dath crìche thar-shoilleir dha eileamaid |
.#gradient > .vertical() |
@startColor, @endColor |
Cruthaich caisead cùl-raon dìreach tar-bhrobhsair |
.#gradient > .horizontal() |
@startColor, @endColor |
Cruthaich caisead cùl-raoin còmhnard thar-bhrabhsair |
.#gradient > .directional() |
@startColor, @endColor, @deg |
Cruthaich caisead cùl-raon stiùiridh thar-bhrabhsair |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Cruthaich caisead cùl-raon trì-dath thar-bhrabhsair |
.#gradient > .radial() |
@innerColor, @outerColor |
Cruthaich caisead cùl-raon radial tar-bhrabhsair |
.#gradient > .striped() |
@color, @angle |
Cruthaich caisead cùl-raon stiallach tar-bhrabhsair |
.#gradientBar() |
@primaryColor, @secondaryColor |
Air a chleachdadh airson putanan gus caisead agus crìoch beagan nas dorcha a shònrachadh |
Stàlaich an inneal-cruinneachaidh loidhne-àithne LESS air feadh na cruinne le npm le bhith a’ ruith an àithne a leanas:
$npm stàladh -g nas lugha
Nuair a bhios tu air a chuir a-steach dìreach ruith make
bho fhreumh an eòlaire bootstrap agad agus tha thu uile deiseil.
A bharrachd air an sin, ma tha neach- faire agad air a chuir a-steach, faodaidh tu ruith make watch
gus am bi bootstrap air ath-thogail gu fèin-ghluasadach a h-uile uair a dheasaicheas tu faidhle anns an lib bootstrap (chan eil seo riatanach, dìreach dòigh goireasachd).
Stàlaich an inneal loidhne-àithne LESS tro Node agus ruith an àithne a leanas:
$ lessc ./lib/bootstrap.less > bootstrap.css
Dèan cinnteach gun cuir thu a-steach --compress
san àithne sin ma tha thu a’ feuchainn ri beagan bytes a shàbhaladh!
Luchdaich sìos na Less.js as ùire agus cuir a-steach an t-slighe thuige (agus Bootstrap) anns an fhaidhle <head>
.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Gus na faidhlichean .less ath-chruinneachadh, dìreach sàbhail iad agus ath-luchdaich do dhuilleag. Bidh Less.js gan cur ri chèile agus gan stòradh ann an stòradh ionadail.
Bidh an app Mac neo-oifigeil a ’ coimhead clàran de fhaidhlichean .less agus a’ cur ri chèile a’ chòd gu faidhlichean ionadail às deidh gach sàbhaladh de fhaidhle .less faire.
Ma thogras tu, is urrainn dhut roghainnean a thogail san app airson mion-sgrùdadh fèin-ghluasadach agus dè an eòlaire anns a bheil na faidhlichean cruinnichte a’ tighinn gu crìch.
Tha Crunch na dheagh neach-deasachaidh agus neach-cruinneachaidh LESS air a thogail air Adobe Air.
Air a chruthachadh leis an aon ghille ris an app Mac neo-oifigeil, is e app Mac a th’ ann an CodeKit a bhios a ’cur ri chèile LESS, SASS, Stylus, agus CoffeeScript.
Aplacaid Mac, Linux, agus PC airson slaodadh is leigeil às de fhaidhlichean LESS. A bharrachd air an sin, tha an còd stòr air GitHub .