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

KARANCIN CSS

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.

Mixins

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.

  1. . kashi {
  2. . tsaftacewa ();
  3. }

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.

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

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 damargin: auto
.ie7-inline-block() babu Yi amfani ban da na yau da kullun display: inline-blockdon 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 placeholderlaunin 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 inputabubuwa, lissafin ƙididdiga da iyakoki
.makeColumn @columns: 1, @offset: 0 Juya kowane divzuwa 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-boxdon 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.

Ƙarin Mac apps

Crunch

Crunch babban edita ne mai ƙanƙanta da mai tarawa wanda aka gina akan Adobe Air.

CodeKit

Mutum ɗaya ne ya ƙirƙira shi da ƙa'idar Mac ɗin da ba na hukuma ba, CodeKit aikace-aikacen Mac ne wanda ke haɗa LESS, SASS, Stylus, da CoffeeScript.

Mai Sauƙi

Mac, Linux, da PC app don ja da jujjuya harhada fayilolin LESS. Ƙari, lambar tushe tana kan GitHub .