Amfani da LESS tare da Bootstrap

Keɓance da tsawaita Bootstrap tare da KASA , CSS preprocessor, don cin gajiyar masu canji, mixins, da ƙari da ake amfani da su don gina Bootstrap's CSS.

Me yasa RASHI?

Ana yin Bootstrap tare da LESS a ainihin sa, harshe mai ƙarfi mai ƙarfi wanda abokinmu na kirki, Alexis Sellier ya kirkira . Yana sa CSS na tushen tsarin haɓaka sauri, sauƙi, kuma mafi daɗi.

Me ya hada?

A matsayin tsawo na CSS, LESS ya haɗa da masu canji, masu gauraya don sake amfani da snippets na lamba, ayyuka don sauƙi na lissafi, gida, har ma da ayyukan launi.

Ƙara koyo

Ziyarci gidan yanar gizon hukuma a http://lesscss.org/ don ƙarin koyo.

Masu canji

Sarrafa launuka da ƙimar pixel a cikin CSS na iya zama ɗan zafi, yawanci cike da kwafi da liƙa. Ba tare da LESS ba ko da yake - sanya launuka ko ƙimar pixel azaman masu canji kuma canza su sau ɗaya.

Waɗancan sanarwar-radius guda uku da kuke buƙatar yin a cikin CSS na yau da kullun? Yanzu sun gangara zuwa layi ɗaya tare da taimakon mixins, snippets na lambar da zaku iya sake amfani da su a ko'ina.

Ayyuka

Sanya grid ɗinku, jagora, kuma mafi sauƙin sassauƙa ta hanyar yin lissafi akan tashi tare da ayyuka. Ƙirƙiri, rarraba, ƙara, da rage hanyar ku zuwa hankali na CSS.

Scafolding da mahada

`@bodyBackground`	`@white`	Launin bangon shafi
`@textColor`	`@grayDark`	Tsohuwar launi na rubutu don duka jiki, kanun labarai, da ƙari
`@linkColor`	`#08c`	Tsohuwar launi rubutu na hanyar haɗin gwiwa
`@linkColorHover`	`darken(@linkColor, 15%)`	Tsohuwar hanyar haɗin yanar gizo launi

Tsarin Grid

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

Rubutun rubutu

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Sabon Courier", monospace
`@baseFontSize`	13 px	Dole ne ya zama pixels
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px ku	Dole ne ya zama pixels
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tables

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

Launi mai launin toka

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

Launukan lafazi

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

Abubuwan da aka gyara

Maɓalli

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

Siffofin

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

Samar da jihohi da faɗakarwa

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2da
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87
`@infoBackground`	#d9edf7

Navbar

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

Zazzagewa

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

Jarumi naúrar

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

Game da mixins

Basic mixins

Ainihin mixin shine ainihin haɗawa ko sashi don snippet na CSS. An rubuta su kamar ajin CSS kuma ana iya kiran su a ko'ina.

. kashi {
  . tsaftacewa ();
}

Parametric mixins

A parametric mixin kamar ainihin mixin ne, amma kuma yana karɓar sigogi (saboda haka sunan) tare da ƙimar tsoho na zaɓi.

. kashi {
  . iyaka - radius ( 4px );
}

A sauƙaƙe ƙara naku

Kusan duk abubuwan haɗin Bootstrap ana adana su a cikin mixins.less, babban fayil mara amfani mai ban sha'awa wanda ke ba ku damar amfani da mixin a cikin kowane .ƙasassun fayiloli a cikin kayan aiki.

Don haka, ci gaba da amfani da waɗanda ke akwai ko jin daɗin ƙara naku kamar yadda kuke buƙata.

Hade mixins

Abubuwan amfani

Mixin	Siga	Amfani
`.clearfix()`	babu	Ƙara zuwa kowane iyaye don share ruwa a ciki
`.tab-focus()`	babu	Aiwatar da salon mayar da hankali kan Webkit da zagaye na Firefox
`.center-block()`	babu	Tsaya ta atomatik matakin matakin toshe ta amfani da`margin: auto`
`.ie7-inline-block()`	babu	Yi amfani ban da na yau da kullun `display: inline-block`don samun tallafin IE7
`.size()`	`@height @width`	Da sauri saita tsayi da faɗi akan layi ɗaya
`.square()`	`@size`	Yana ginawa `.size()`don saita faɗi da tsayi azaman ƙima ɗaya
`.opacity()`	`@opacity`	Saita, a cikin lambobi gabaɗaya, ƙimar rashin fahimta (misali, "50" ko "75")

Siffofin

Mixin	Siga	Amfani
`.placeholder()`	`@color: @placeholderText`	Saita `placeholder`launin rubutu don shigarwa

Rubutun rubutu

Mixin	Siga	Amfani
`#font > #family > .serif()`	babu	Yi wani kashi yin amfani da tarin rubutun serif
`#font > #family > .sans-serif()`	babu	Yi wani kashi ta amfani da tarin rubutun sans-serif
`#font > #family > .monospace()`	babu	Yi wani kashi yin amfani da tari na rubutu na monospace
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	A sauƙaƙe saita girman font, nauyi, da jagora
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Saita dangin font zuwa serif, da sarrafa girman, nauyi, da jagora
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Saita dangin font zuwa sans-serif, da sarrafa girman, nauyi, da jagora
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Saita dangin font zuwa sararin samaniya, da sarrafa girman, nauyi, da jagora

Tsarin Grid

Mixin	Siga	Amfani
`.container-fixed()`	babu	Ƙirƙiri akwati a kwance a tsakiya don riƙe abun cikin ku
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Ƙirƙirar tsarin grid pixel (kwantena, jere, da ginshiƙai) tare da n ginshiƙai da x pixel faffadan gutter
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Ƙirƙirar tsarin grid bisa dari tare da n ginshiƙai da x % faffadan gutter
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Ƙirƙirar tsarin grid na pixel don `input`abubuwa, lissafin ƙididdiga da iyakoki
`.makeColumn`	`@columns: 1, @offset: 0`	Juya kowane `div`zuwa ginshiƙin grid ba tare da `.span*`azuzuwan ba

Farashin CSS3

Mixin	Siga	Amfani
`.border-radius()`	`@radius`	Zagaye kusurwoyin wani kashi. Zai iya zama ƙima ɗaya ko ƙima guda huɗu da ke raba sararin samaniya
`.box-shadow()`	`@shadow`	Ƙara inuwar digo zuwa kashi
`.transition()`	`@transition`	Ƙara tasirin canjin CSS3 (misali, `all .2s linear`)
`.rotate()`	`@degrees`	Juya kashi n digiri
`.scale()`	`@ratio`	Ma'auni kashi zuwa n sau na asali girmansa
`.translate()`	`@x, @y`	Matsar da wani abu akan jiragen x da y
`.background-clip()`	`@clip`	Shuka bangon wani abu (mai amfani ga `border-radius`)
`.background-size()`	`@size`	Sarrafa girman hotunan bango ta hanyar CSS3
`.box-sizing()`	`@boxmodel`	Canja samfurin akwatin don wani kashi (misali, `border-box`don cikakken faɗin `input`)
`.user-select()`	`@select`	Sarrafa zaɓin rubutu na siginan kwamfuta akan shafi
`.backface-visibility()`	`@visibility: visible`	Hana yaɗuwar abun ciki lokacin amfani da CSS 3D masu canzawa
`.resizable()`	`@direction: both`	Yi kowane nau'i mai ƙima a dama da ƙasa
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Yi abun ciki na kowane kashi amfani da ginshiƙan CSS3
`.hyphens()`	`@mode: auto`	CSS3 lokacin da kake so (ya haɗa da `word-wrap: break-word`)

Bayanan baya da gradients

Mixin	Siga	Amfani
`#translucent > .background()`	`@color: @white, @alpha: 1`	Ba wa wani kashi launin bango mai juyayi
`#translucent > .border()`	`@color: @white, @alpha: 1`	Ba da wani kashi launin iyaka mai juyayi
`#gradient > .vertical()`	`@startColor, @endColor`	Ƙirƙirar faifan bangon giciye a tsaye
`#gradient > .horizontal()`	`@startColor, @endColor`	Ƙirƙirar madaidaicin mai lilo a kwance a kwance
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Ƙirƙiri gradient na bayan fage na mai binciken giciye
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Ƙirƙirar browser mai launin shuɗi mai launi uku
`#gradient > .radial()`	`@innerColor, @outerColor`	Ƙirƙiri gradient na bangon faifan browser na giciye
`#gradient > .striped()`	`@color, @angle`	Ƙirƙiri ƙwanƙwasa mai raɗaɗi mai raɗaɗi na mai lilo
`#gradientBar()`	`@primaryColor, @secondaryColor`	Ana amfani da shi don maɓalli don keɓance iyakar gradient da ɗan duhu

Lura: Idan kuna ƙaddamar da buƙatun ja ga GitHub tare da ingantaccen CSS, dole ne ku sake tattara CSS ta kowane ɗayan waɗannan hanyoyin.

Kayan aikin harhadawa

Node tare da makefile

Shigar da mai tara layin umarni na LESS, JSHint, Recess, da ugify-js a duniya tare da npm ta hanyar aiwatar da umarni mai zuwa:

$ npm shigar -g kasa jashint recess uglify-js

Da zarar an shigar, kawai gudu makedaga tushen kundin kundin bootstrap ɗin ku kuma an saita ku duka.

Bugu da ƙari, idan kun shigar da mai tsaro , za ku iya gudu make watchdon sake gina bootstrap ta atomatik duk lokacin da kuka gyara fayil a cikin bootstrap lib (wannan ba a buƙata ba, kawai hanyar dacewa).

Layin umarni

Shigar da kayan aikin LESS na umarni ta hanyar Node kuma gudanar da umarni mai zuwa:

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

Tabbatar kun haɗa --compresscikin wannan umarni idan kuna ƙoƙarin adana wasu bytes!

Javascript

Zazzage sabuwar Less.js kuma haɗa hanyar zuwa gare ta (da Bootstrap) a cikin <head>.

<link rel = "stylesheet/less" href = "/hanya/to/bootstrap.less" > <script src = "/hanya/to/less.js" ></script>

Don sake tattara fayilolin .ƙasassun, kawai ajiye su kuma sake loda shafinku. Less.js yana tattara su kuma yana adana su a ma'ajiyar gida.

Mac app mara izini

Aikace-aikacen Mac wanda ba na hukuma ba yana kallon kundayen adireshi na .ƙasassun fayiloli kuma yana tattara lambar zuwa fayilolin gida bayan kowane ajiyar fayil maras kallo.

Idan kuna so, zaku iya jujjuya abubuwan da aka zaɓa a cikin ƙa'idar don ragewa ta atomatik da kuma wace jagorar fayilolin da aka haɗa suka ƙare.

Gina tare da KASA

Me yasa RASHI?

Me ya hada?

Ƙara koyo

Masu canji

Mixins

Ayyuka

Bootstrap masu canji KARANCIN masu canji, ƙimar su, da jagororin amfani

Scafolding da mahada

Tsarin Grid

Rubutun rubutu

Tables

Launi mai launin toka

Launukan lafazi

Abubuwan da aka gyara

Maɓalli

Siffofin

Samar da jihohi da faɗakarwa

Navbar

Zazzagewa

Jarumi naúrar

Bootstrap mixins

Game da mixins

Basic mixins

Parametric mixins

A sauƙaƙe ƙara naku

Hade mixins

Abubuwan amfani

Siffofin

Rubutun rubutu

Tsarin Grid

Farashin CSS3

Bayanan baya da gradients

Haɗa Bootstrap tare da KASA

Kayan aikin harhadawa

Node tare da makefile

Layin umarni

Javascript

Mac app mara izini

Ƙarin Mac apps

Crunch

CodeKit

Mai Sauƙi