A 'cleachdadh LESS le Bootstrap

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.

Carson nas lugha?

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.

Dè tha air a ghabhail a-steach?

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.

Ionnsaich barrachd

CSS nas lugha

Tadhail air an làrach-lìn oifigeil aig http://lesscss.org/ gus tuilleadh ionnsachadh.

Caochlaidhean

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.

Measgachadh

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.

Obrachaidhean

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.

Sgafaill agus ceanglaichean

@bodyBackground @white Dath cùl na duilleige
@textColor @grayDark Dath teacsa bunaiteach airson a’ bhodhaig gu lèir, cinn, agus barrachd
@linkColor #08c Dath teacsa ceangail bunaiteach
@linkColorHover darken(@linkColor, 15%) Dath hover teacsa ceangail bunaiteach

Siostam clèithe

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6.382978723%
@fluidGridGutterWidth 2.127659574 %

Clò-sgrìobhaidh

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Courier New", monospace
@baseFontSize 13px Feumaidh piogsail a bhith ann
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Feumaidh piogsail a bhith ann
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Clàir

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

Dathan sgèile liath

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

Dathan accent

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

Co-phàirtean

Putanan

@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

Foirmean

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

Foirm stàitean agus rabhaidhean

@warningText #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2ded
@successText #468847
@successBackground #df0d8
@infoText #3a87ad
@infoBackground #d9edf7

Navbar

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

Droch-dhìol

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

Aonad gaisgeach

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Mu dheidhinn measgachadh

Measgachadh bunaiteach

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.

  1. . eileamaid {
  2. . soilleir ();
  3. }

Measgachadh parametric

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.

  1. . eileamaid {
  2. . chrìoch - radius ( 4px );
  3. }

Cuir do chuid fhèin gu furasta

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 air a thoirt a-steach

Goireasan

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-blockgus taic IE7 fhaighinn
.size() @height @width Suidhich gu sgiobalta an àirde agus an leud air aon loidhne
.square() @size Togail air adhart .size()gus an leud agus an àirde a shuidheachadh leis an aon luach
.opacity() @opacity Suidhich, ann an àireamhan slàn, an ceudad neo-sheasmhachd (me, "50" no "75")

Foirmean

Measgachadh Paramadairean Cleachdadh
.placeholder() @color: @placeholderText Suidhich placeholderdath an teacsa airson cuir a-steach

Clò-sgrìobhaidh

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

Siostam clèithe

Measgachadh Paramadairean Cleachdadh
.container-fixed() gin Cruthaich soitheach le meadhan còmhnard airson do shusbaint a chumail
#grid > .core() @gridColumnWidth, @gridGutterWidth Cruthaich siostam clèithe piogsail (soitheach, sreath, agus colbhan) le n colbhan agus x gutter farsaing piogsail
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Cruthaich siostam clèithe sa cheud le n colbhan agus x % gutter de leud
#grid > .input() @gridColumnWidth, @gridGutterWidth Cruthaich an siostam clèithe piogsail airson inputeileamaidean, a 'toirt cunntas air pleadhag agus crìochan
.makeColumn @columns: 1, @offset: 0 Tionndaidh gin divgu colbh clèithe às aonais na .span*clasaichean

Feartan CSS3

Measgachadh Paramadairean Cleachdadh
.border-radius() @radius Timcheall air oiseanan eileamaid. Faodaidh e a bhith na aon luach no ceithir luachan eadar-dhealaichte
.box-shadow() @shadow Cuir sgàile tuiteam 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, @y 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-boxairson làn-leud input)
.user-select() @select Smachd cùrsair taghadh teacsa air duilleag
.backface-visibility() @visibility: visible Cuir casg air priobadh susbaint nuair a bhios tu a’ cleachdadh cruth-atharrachadh CSS 3D
.resizable() @direction: both Dèan eileamaid sam bith ath-mheudachadh air an làimh dheis agus gu h-ìosal
.content-columns() @columnCount, @columnGap: @gridGutterWidth Dèan susbaint eileamaid sam bith a’ cleachdadh colbhan CSS3
.hyphens() @mode: auto tàthan CSS3 nuair a tha thu ga iarraidh (a’ toirt a-steach word-wrap: break-word)

Cùl-fhiosrachadh agus caisead

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 thar-bhrabhsair
#gradientBar() @primaryColor, @secondaryColor Air a chleachdadh airson putanan gus caisead agus crìoch beagan nas dorcha a shònrachadh
Nota: Ma tha thu a’ cur a-steach iarrtas tarraing gu GitHub le CSS atharraichte, feumaidh tu an CSS ath-chruinneachadh tro gin de na dòighean sin.

Innealan airson cruinneachadh

Nod le makefile

Stàlaich an inneal-cruinneachaidh loidhne-àithne LESS, JSHint, Recess, agus uglify-js air feadh na cruinne le npm le bhith a’ ruith an àithne a leanas:

$ npm install -g nas lugha jshint fosadh uglify-js

Nuair a bhios tu air a chuir a-steach dìreach ruith makebho 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 watchgus 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).

Loidhne-àithne

Stàlaich an inneal loidhne-àithne LESS tro Node agus ruith an àithne a leanas:

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

Dèan cinnteach gun cuir thu a-steach --compresssan àithne sin ma tha thu a’ feuchainn ri beagan bytes a shàbhaladh!

Javascript

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.

Aplacaid neo-oifigeil Mac

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.

Barrachd aplacaidean Mac

Crùisg

Tha Crunch na dheagh neach-deasachaidh agus neach-cruinneachaidh LESS air a thogail air Adobe Air.

CodeKit

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.

Sìmplidh

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 .