Koresha LESS hamwe na Bootstrap

Hindura kandi wongere Bootstrap hamwe na LESS , progaramu ya CSS, kugirango ukoreshe impinduka, ivanga, nibindi byakoreshejwe mukubaka CSS ya Bootstrap.

Kuki KUBESHYA?

Bootstrap ikozwe na LESS kumurongo wacyo, imvugo yimiterere yimiterere yakozwe ninshuti yacu nziza, Alexis Sellier . Bituma iterambere rya sisitemu ishingiye kuri CSS byihuse, byoroshye, kandi birashimishije.

Harimo iki?

Nukwagura CSS, LESS ikubiyemo impinduka, ivanga kubice byongeye gukoreshwa bya code, ibikorwa kubiharuro byoroheje, ibyari, ndetse nibikorwa byamabara.

Wige byinshi

Sura urubuga rwemewe kuri http://lesscss.org/ kugirango umenye byinshi.

Ibihinduka

Gucunga amabara na pigiseli indangagaciro muri CSS birashobora kuba akababaro gato, mubisanzwe byuzuye kopi na paste. Ntabwo hamwe na LESS nubwo - shyira amabara cyangwa pigiseli indangagaciro nkibihinduka hanyuma uhindure rimwe.

Imvange

Ayo matangazo atatu yumupaka-radiyo ukeneye gukora mubisanzwe ol 'CSS? Noneho baramanutse kumurongo umwe ubifashijwemo na mixin, uduce twa code ushobora gukoresha ahantu hose.

Ibikorwa

Kora gride yawe, iyoboye, kandi birenze guhinduka mugukora imibare kuguruka hamwe nibikorwa. Kugwiza, kugabana, kongeraho, no gukuramo inzira yawe kuri CSS.

Guhuza no guhuza

`@bodyBackground`	`@white`	Urupapuro rwinyuma
`@textColor`	`@grayDark`	Ibisanzwe byanditseho ibara kumubiri wose, imitwe, nibindi byinshi
`@linkColor`	`#08c`	Mburabuzi Ihuza inyandiko Ibara
`@linkColorHover`	`darken(@linkColor, 15%)`	Mburabuzi Ihuza inyandiko ihindura ibara

Sisitemu ya sisitemu

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

Imyandikire

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier Nshya", monospace
`@baseFontSize`	13px	Ugomba kuba pigiseli
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Ugomba kuba pigiseli
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Imbonerahamwe

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

Ibara ryijimye

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

Amabara meza

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

Ibigize

Utubuto

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

Ifishi

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

Shiraho leta no kumenyesha

`@warningText`	# c09853
`@warningBackground`	# f3edd2
`@errorText`	# b94a48
`@errorBackground`	# f2dede
`@successText`	# 468847
`@successBackground`	# dff0d8
`@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`

Ibitonyanga

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

Igice cyintwari

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

Ibyerekeye kuvanga

Uruvange rwibanze

Ivanga shingiro mubyukuri harimo gushiramo cyangwa igice kubice bya CSS. Byanditswe nkicyiciro cya CSS kandi birashobora guhamagarwa ahantu hose.

. element {
  . ibisobanuro ();
}

Imvange ya Parametric

Ivangavanga risanzwe ni nkivanga shingiro, ariko kandi ryemera ibipimo (niyo mpamvu izina) hamwe nibisanzwe bitemewe.

. element {
  . umupaka - radiyo ( 4px );
}

Ongera byoroshye

Hafi ya mixin zose za Bootstrap zibitswe muri mixins.less, akamaro keza cyane .nta fayili igushoboza gukoresha mixin muri buri fayili. Idafite dosiye mubitabo.

Noneho, jya imbere ukoreshe ibihari cyangwa wumve ko wongeyeho ibyawe nkuko ubikeneye.

Harimo kuvanga

Ibikorwa

Kuvanga	Ibipimo	Ikoreshwa
`.clearfix()`	nta na kimwe	Ongeraho kubabyeyi bose kugirango bakureho ibireremba imbere
`.tab-focus()`	nta na kimwe	Koresha uburyo bwibanze bwa Webkit hamwe nuruziga rwa Firefox
`.center-block()`	nta na kimwe	Imodoka hagati yo guhagarika urwego urwego ukoresheje`margin: auto`
`.ie7-inline-block()`	nta na kimwe	Koresha wongeyeho `display: inline-block`mubisanzwe kugirango ubone inkunga ya IE7
`.size()`	`@height @width`	Shiraho vuba uburebure n'ubugari kumurongo umwe
`.square()`	`@size`	Yubaka `.size()`kugirango ashyireho ubugari n'uburebure agaciro kamwe
`.opacity()`	`@opacity`	Shiraho, mumibare yose, ijanisha rya opacite (urugero, "50" cyangwa "75")

Ifishi

Kuvanga	Ibipimo	Ikoreshwa
`.placeholder()`	`@color: @placeholderText`	Shiraho `placeholder`ibara ryibara ryinjiza

Imyandikire

Kuvanga	Ibipimo	Ikoreshwa
`#font > #family > .serif()`	nta na kimwe	Kora ikintu koresha serif yimyandikire
`#font > #family > .sans-serif()`	nta na kimwe	Kora ikintu koresha sans-serif yimyandikire
`#font > #family > .monospace()`	nta na kimwe	Kora ikintu koresha imyandikire ya monospace
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Byoroshye gushiraho ingano yimyandikire, uburemere, no kuyobora
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Shiraho umuryango wimyandikire kuri serif, no kugenzura ingano, uburemere, no kuyobora
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Shiraho umuryango wimyandikire kuri sans-serif, no kugenzura ingano, uburemere, no kuyobora
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Shiraho umuryango wimyandikire kuri monospace, kandi ugenzure ingano, uburemere, no kuyobora

Sisitemu ya sisitemu

Kuvanga	Ibipimo	Ikoreshwa
`.container-fixed()`	nta na kimwe	Kora ikintu gitambitse giteganijwe kugirango ufate ibikubiyemo
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Gukora pigiseli ya sisitemu (kontineri, umurongo, ninkingi) hamwe n inkingi na x pigiseli yagutse
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Gukora sisitemu ya sisitemu ya sisitemu hamwe n inkingi na x % ubugari
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Gukora pigiseli ya grid sisitemu kubintu `input`, kubara padi nimbibi
`.makeColumn`	`@columns: 1, @offset: 0`	Hindura icyaricyo cyose `div`muri gride inkingi idafite `.span*`amasomo

Imiterere ya CSS3

Kuvanga	Ibipimo	Ikoreshwa
`.border-radius()`	`@radius`	Kuzenguruka inguni z'ikintu. Irashobora kuba agaciro kamwe cyangwa bane umwanya utandukanijwe nagaciro
`.box-shadow()`	`@shadow`	Ongeraho igicucu gitonyanga kubintu
`.transition()`	`@transition`	Ongeramo CSS3 ingaruka yinzibacyuho (eg, `all .2s linear`)
`.rotate()`	`@degrees`	Kuzenguruka ikintu n dogere
`.scale()`	`@ratio`	Gupima ikintu kugeza n inshuro ubunini bwacyo
`.translate()`	`@x, @y`	Himura ikintu ku ndege ya x na y
`.background-clip()`	`@clip`	Kata inyuma yibintu (bifite akamaro kuri `border-radius`)
`.background-size()`	`@size`	Igenzura ingano yamashusho yinyuma ukoresheje CSS3
`.box-sizing()`	`@boxmodel`	Hindura agasanduku k'icyitegererezo kubintu (urugero, `border-box`kubugari bwuzuye `input`)
`.user-select()`	`@select`	Kugenzura indanga guhitamo inyandiko kurupapuro
`.backface-visibility()`	`@visibility: visible`	Irinde guhindagurika kubirimo mugihe ukoresheje CSS ya 3D
`.resizable()`	`@direction: both`	Kora ikintu icyo aricyo cyose gishobora guhinduka iburyo no hepfo
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Kora ibikubiye mubintu byose ukoreshe CSS3

Amavu n'amavuko

Kuvanga	Ibipimo	Ikoreshwa
`#translucent > .background()`	`@color: @white, @alpha: 1`	Tanga ikintu kibara ibara risobanutse
`#translucent > .border()`	`@color: @white, @alpha: 1`	Tanga ikintu ibara risobanutse neza
`#gradient > .vertical()`	`@startColor, @endColor`	Kora cross-mushakisha vertical background gradient
`#gradient > .horizontal()`	`@startColor, @endColor`	Kora umusaraba-mushakisha utambitse inyuma ya gradient
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Kora cross-mushakisha icyerekezo cyinyuma
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Kora cross-mushakisha-amabara atatu yinyuma ya gradient
`#gradient > .radial()`	`@innerColor, @outerColor`	Kora cross-mushakisha ya radiyo yinyuma ya gradient
`#gradient > .striped()`	`@color, @angle`	Kora umusaraba-wambukiranya umurongo winyuma
`#gradientBar()`	`@primaryColor, @secondaryColor`	Byakoreshejwe kuri buto kugirango ugabanye urwego ruto kandi rwijimye gato

Icyitonderwa: Niba utanze icyifuzo cyo gukurura muri GitHub hamwe na CSS yahinduwe, ugomba gusubiramo CSS ukoresheje bumwe murubwo buryo.

Ibikoresho byo gukusanya

Node hamwe na makefile

Shyiramo LESS command umurongo utegura hanyuma uglify-js kwisi yose hamwe npm ukoresheje itegeko rikurikira:

$ npm shyiramo -g gake uglify-js

Iyo umaze kwinjizamo gusa ukore makemumuzi yububiko bwa bootstrap kandi mwese murashizeho.

Byongeye kandi, niba ufite watchr yashizwemo, urashobora kwiruka make watchkugirango bootstrap ihite yubaka burigihe burigihe uhinduye dosiye muri bootstrap lib (ibi ntibisabwa, gusa uburyo bworoshye).

Umurongo

Shyiramo igikoresho cya LESS umurongo ukoresheje Node hanyuma ukore itegeko rikurikira:

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

Wemeze gushyiramo --compressiryo tegeko niba ugerageza kubika byite!

Javascript

Kuramo ibishya Less.js hanyuma ushiremo inzira igana (na Bootstrap) muri <head>.

<ihuza rel = "urupapuro rwerekana / ruto" href = "/ inzira/to/bootstrap.less" > <inyandiko src = " / inzira /

Kugirango usubiremo dosiye .idafite, gusa uzigame hanyuma wongere usubiremo page yawe. Gito.js irabakusanya ikabika mububiko bwaho.

Porogaramu idasanzwe ya Mac

Porogaramu idasanzwe ya Mac ireba ububiko bwamadosiye adafite kandi ikusanya kode kumadosiye yaho nyuma yo kubika dosiye ireba. Idafite.

Niba ubishaka, urashobora guhinduranya ibyo ukunda muri porogaramu yo kugabanya mu buryo bwikora kandi ni ubuhe bubiko dosiye zakozwe zirangirira.

Yubatswe na LESS

Kuki KUBESHYA?

Harimo iki?

Wige byinshi

Ibihinduka

Imvange

Ibikorwa

Impinduka za Bootstrap Impinduka nke, indangagaciro zabo, nubuyobozi bukoreshwa

Guhuza no guhuza

Sisitemu ya sisitemu

Imyandikire

Imbonerahamwe

Ibara ryijimye

Amabara meza

Ibigize

Utubuto

Ifishi

Shiraho leta no kumenyesha

Navbar

Ibitonyanga

Igice cyintwari

Bootstrap ivanze

Ibyerekeye kuvanga

Uruvange rwibanze

Imvange ya Parametric

Ongera byoroshye

Harimo kuvanga

Ibikorwa

Ifishi

Imyandikire

Sisitemu ya sisitemu

Imiterere ya CSS3

Amavu n'amavuko

Gukusanya Bootstrap hamwe na LESS

Ibikoresho byo gukusanya

Node hamwe na makefile

Umurongo

Javascript

Porogaramu idasanzwe ya Mac

Porogaramu nyinshi za Mac

Crunch

CodeKit

Ntibyoroshye