Iji LESS na Bootstrap

Hazie na ịgbatị Bootstrap na LESS , onye na-ebu ụzọ CSS, ka ị nweta uru nke mgbanwe, mixins, na ihe ndị ọzọ ejiri wuo Bootstrap's CSS.

Gịnị kpatara erughị ala?

A na-eme Bootstrap na LESS n'isi ya, asụsụ ụdịdị ike nke ezigbo enyi anyị, Alexis Sellier kere . Ọ na-eme mmepe CSS dabere na sistemu ngwa ngwa, dị mfe na ihe ọchị karịa.

Kedu ihe gụnyere?

Dị ka ndọtị nke CSS, obere na-agụnye mgbanwe, mixins maka reusable snippets nke koodu, arụmọrụ maka mfe mgbakọ na mwepụ, nesting, na ọbụna agba ọrụ.

Mụtakwuo

CSS dị obere

Gaa na webụsaịtị gọọmentị na http://lesscss.org/ ka ịmatakwu ihe.

Mgbanwe

Ijikwa agba na ụkpụrụ pikselụ na CSS nwere ike ịbụ ntakịrị ihe mgbu, na-ejupụtakarị na nnomi na mado. Ọ bụghị na obere n'agbanyeghị - kenye agba ma ọ bụ ụkpụrụ pikselụ dị ka mgbanwe wee gbanwee ha otu ugboro.

Ngwakọta

Nkwuwapụta oke-oke atọ ahụ ị ga-emerịrị na CSS? Ugbu a, ha na-agbada n'otu ahịrị site n'enyemaka nke mixins, snippets nke koodu ị nwere ike ijikwa ebe ọ bụla.

Ọrụ

Mee ka grid gị, na-edu, na nke ukwuu na-agbanwe agbanwe site na iji ọrụ na-eme mgbakọ na mwepụ na ofufe. Mụbaa, kewaa, gbakwunye, ma wepụ ụzọ gị gaa na ịdị ọcha CSS.

Ihe mkpuchi na njikọ

@bodyBackground @white Agba ndabere ibe
@textColor @grayDark Agba ederede ezighi ezi maka ahụ dum, isiokwu na ndị ọzọ
@linkColor #08c Agba ederede njikọ ezighi ezi
@linkColorHover darken(@linkColor, 15%) Agba mgbagharị ederede njikọ ezighi ezi

Sistemụ grid

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

Ederede

@sansFontFamily "Helvetica Neue", Helvetica, Arial, Sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Courier New", monospace
@baseFontSize 13px Kwesịrị ịbụ pikselụ
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Kwesịrị ịbụ pikselụ
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Tebụl

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

Agba isi awọ

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

Agba ụda olu

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

Ngwa

Bọtịnụ

@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

Ụdị

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

Depụta steeti na ọkwa

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

Mbelata

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

Otu dike

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Banyere mixins

Ngwakọta ndị bụ isi

Ngwakọta bụ isi bụ n'ezie gụnyere ma ọ bụ akụkụ maka snippet nke CSS. Edere ha dị ka klaasị CSS ma enwere ike ịkpọ ha ebe ọ bụla.

  1. . mmewere {
  2. . mkpochapụ ();
  3. }

Ngwakọta parametric

Ngwakọta parametric dị ka mixin bụ isi, mana ọ na-anabatakwa paramita (ya mere aha ahụ) yana ụkpụrụ ndabara nhọrọ.

  1. . mmewere {
  2. . oke - radius ( 4px );
  3. }

Dị mfe tinye nke gị

Ihe fọrọ nke nta ka ọ bụrụ mixins niile nke Bootstrap na-echekwa na mixins.less, ihe magburu onwe ya na-abaghị uru faịlụ na-enyere gị aka iji mixin na nke ọ bụla n'ime faịlụ . obere na ngwá ọrụ.

Yabụ, gaa n'ihu jiri ndị dị adị ma ọ bụ nweere onwe gị ịgbakwunye nke gị dịka ịchọrọ.

Ngwakọta gụnyere

Ngwa ọrụ

Ngwakọta Oke Ojiji
.clearfix() onweghi Tinye na nne na nna ọ bụla iji kpochapụ ihe na-ese n'elu
.tab-focus() onweghi Tinye ụdị nlebara anya Webkit yana ihe ndepụta Firefox gburugburu
.center-block() onweghi Nchekwa onwe nke ihe mgbochi-larịị n'ijimargin: auto
.ie7-inline-block() onweghi Jiri na mgbakwunye na oge niile display: inline-blockiji nweta nkwado IE7
.size() @height @width Tọọ ngwa ngwa na ịdị elu na obosara n'otu ahịrị
.square() @size Na-ewuli elu .size()ka ịtọ obosara na ịdị elu ka otu uru
.opacity() @opacity Tọọ, n'ọnụọgụ dum, pasent nke oghere (dịka, "50" ma ọ bụ "75")

Ụdị

Ngwakọta Oke Ojiji
.placeholder() @color: @placeholderText Tọọ placeholderụcha ederede maka ntinye

Ederede

Ngwakọta Oke Ojiji
#font > #family > .serif() onweghi Mee mmewere jiri ndokọ mkpụrụedemede serif
#font > #family > .sans-serif() onweghi Mee mmewere jiri ndokọba mkpụrụedemede sans-serif
#font > #family > .monospace() onweghi Mepụta mmewere jiri nchịkọta mkpụrụedemede monospace
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Hazie nha mkpụrụedemede, ịdị arọ na ụzọ n'ụzọ dị mfe
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Tọọ ezinụlọ font ka ọ bụrụ serif, ma jikwaa nha, ịdị arọ na ụzọ
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Tọọ ezinụlọ font na sans-serif, ma jikwaa nha, ịdị arọ na ụzọ
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Tọọ ezinụlọ font ka ọ bụrụ monospace, ma jikwaa nha, ịdị arọ na ụzọ

Sistemụ grid

Ngwakọta Oke Ojiji
.container-fixed() onweghi Mepụta akpa kwụ n'ahịrị maka ijide ọdịnaya gị
#grid > .core() @gridColumnWidth, @gridGutterWidth Mepụta sistemu grid pixel (akpa, ahiri na kọlụm) nwere n kọlụm na x pikselụ obosara gutter
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Mepụta sistemu grid nke nwere n kọlụm yana x % obosara gọta
#grid > .input() @gridColumnWidth, @gridGutterWidth Mepụta usoro grid pixel maka inputihe, na-aza ajụjụ maka padding na oke
.makeColumn @columns: 1, @offset: 0 Tụgharịa nke ọ bụla ka ọ divbụrụ kọlụm grid na-enweghị .span*klaasị

Njirimara CSS3

Ngwakọta Oke Ojiji
.border-radius() @radius Gburugburu akụkụ nke mmewere. Nwere ike ịbụ otu uru ma ọ bụ ụkpụrụ anọ kewara oghere
.box-shadow() @shadow Tinye onyinyo dobe na mmewere
.transition() @transition Tinye mmetụta mgbanwe CSS3 (dịka ọmụmaatụ, all .2s linear)
.rotate() @degrees Tụgharịa ihe mmewere n degrees
.scale() @ratio Gbanwee mmewere ka n jiri nha mbụ ya
.translate() @x, @y Bugharịa otu mmewere na ụgbọ elu x na y
.background-clip() @clip Kpochapụ ihe ndabere nke mmewere (bara uru maka border-radius)
.background-size() @size Jikwaa nha onyonyo ndabere site na CSS3
.box-sizing() @boxmodel Gbanwee ụdị igbe maka mmewere (dịka, border-boxmaka obosara zuru oke input)
.user-select() @select Jikwaa nhọrọ ederede cursor na ibe
.backface-visibility() @visibility: visible Gbochie ịsagharị ọdịnaya mgbe ị na-eji mgbanwe CSS 3D
.resizable() @direction: both Mee ka ihe ọ bụla gbanwee n'aka nri na ala
.content-columns() @columnCount, @columnGap: @gridGutterWidth Mee ọdịnaya nke ihe ọ bụla jiri kọlụm CSS3
.hyphens() @mode: auto CSS3 hyphenation mgbe ịchọrọ ya (gụnyere word-wrap: break-word)

Ndabere na gradients

Ngwakọta Oke Ojiji
#translucent > .background() @color: @white, @alpha: 1 Nye ihe mmewere ka ọ bụrụ ụcha ndabere translucent
#translucent > .border() @color: @white, @alpha: 1 Nye ihe mmewere agba oke oke translucent
#gradient > .vertical() @startColor, @endColor Mepụta gradient ndabere kwụ ọtọ n'ofe ihe nchọgharị
#gradient > .horizontal() @startColor, @endColor Mepụta gradient n'okirikiri ihe nchọgharị gafere
#gradient > .directional() @startColor, @endColor, @deg Mepụta gradient ndabere ntụzịaka ihe nchọgharị
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Mepụta ihe nchọgharị n'okirikiri agba atọ
#gradient > .radial() @innerColor, @outerColor Mepụta gradient ndabere radial cross-browser
#gradient > .striped() @color, @angle Mepụta gradient okirikiri nwere akara ihe nchọgharị obe
#gradientBar() @primaryColor, @secondaryColor Ejiri ya maka bọtịnụ iji kenye oke gradient na ntakịrị ọchịchịrị
Mara: Ọ bụrụ na ị na-enye GitHub arịrịọ ịdọrọ site na iji CSS gbanwetụrụ, ị ga-emerịrị usoro CSS ọ bụla.

Ngwa maka ịchịkọta

Ọnụ nwere makefile

Wụnye nchịkọta iwu LESS, JSHint, Recess, na ugify-js zuru ụwa ọnụ na npm site na iji iwu na-esonụ:

$ npm install -g obere ezumike jshint uglify-js

Ozugbo etinyere ya, gba ọsọ makesite na mgbọrọgwụ nke ndekọ ndekọ bootstrap gị ma edobela gị niile.

Na mgbakwunye, ọ bụrụ na etinyere onye nche , ị nwere ike ịgba ọsọ make watchka eweghachi bootstrap na-akpaghị aka oge ọ bụla ị dezie faịlụ na bootstrap lib (nke a anaghị achọ, naanị usoro dị mma).

Ahịrị iwu

Wụnye ngwa ahịrị ahịrị LESS site na Node wee mee iwu a:

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

Jide n'aka na itinye --compressn'iwu ahụ ma ọ bụrụ na ị na-agbalị ichekwa ụfọdụ bytes!

Javascript

Budata Less.js kacha ọhụrụ wee tinye ụzọ ya (na Bootstrap) na faịlụ <head>.

<njikọ rel = "stylesheet/less" href = "/ụzọ/to/bootstrap.less" > <script src = "/ụzọ/to/less.js" ></script>  
 

Iji chịkọta faịlụ ndị na-erughị obere, naanị chekwaa ha wee bugharịa ibe gị. Less.js na-achịkọta ha ma na-echekwa ha na nchekwa mpaghara.

Ngwa Mac na-akwadoghị

Ngwa Mac na-akwadoghị na- elele akwụkwọ ndekọ aha nke faịlụ ndị na-enweghị obere ma na-achịkọta koodu ahụ na faịlụ mpaghara mgbe nchekwa ọ bụla nke faịlụ na-enweghị .

Ọ bụrụ na-amasị gị, ị nwere ike ịgbanwe mmasị na ngwa ahụ maka iwetulata akpaaka yana akwụkwọ ndekọ aha faịlụ ekpokọtara na-ejedebe.

Ngwa Mac ndị ọzọ

Crunch

Crunch bụ ezigbo onye na-edezi ihe na-agụkọta ihe na-enweghị atụ nke e wuru na Adobe Air.

CodeKit

Otu nwoke mebere ya dị ka ngwa Mac na-akwadoghị, CodeKit bụ ngwa Mac na-achịkọta LESS, SASS, Stylus na CoffeeScript.

Dị mfe

Mac, Linux, na ngwa PC maka ịdọrọ na dobe nchịkọta faịlụ ndị dị obere. Ọzọkwa, koodu isi mmalite dị na GitHub .