Go diriša LESS ka Bootstrap

Tlwaetša le go katološa Bootstrap ka LESS , e lego sedirišwa sa pele sa CSS, go diriša diphetogo, mixins, le tše dingwe tšeo di dirišetšwago go aga CSS ya Bootstrap.

Ke ka baka la’ng go le ka tlase ga moo?

Bootstrap e dirilwe ka LESS motheong wa yona, polelo ya stylesheet ye e fetogago yeo e hlotšwego ke mogwera wa rena yo mobotse, Alexis Sellier . E dira gore go hlabolla CSS ye e theilwego godimo ga ditshepedišo go be ka lebelo, go be bonolo le go ba mo go thabišago.

Ke eng seo se akaretšwago?

Bjalo ka katoloso ya CSS, LESS e akaretša diphetogo, mixins bakeng sa dikarolwana tša khoutu tšeo di ka dirišwago gape, ditiro tša dipalo tše bonolo, go bea dihlaga gaešita le mešomo ya mebala.

Ithute ka botlalo

LESS CSS

Etela weposaete ya semmušo go http://lesscss.org/ go ithuta ka botlalo.

Diphetogo

Go laola mebala le dikelo tša dipiksele ka go CSS e ka ba bohloko bjo bonyenyane, gantši e tletše ka go kopiša le go kgomaretša. E sego ka LESS le ge go le bjalo—abela mebala goba dikelo tša dipiksele bjalo ka diphetogo gomme o di fetoše gatee.

Ditswaki

Dipolelo tšeo tše tharo tša mollwane-radius tšeo o swanetšego go di dira ka go CSS ya ka mehla ol'? Bjale di theogile go mola o tee ka thušo ya di-mixin, dikarolo tša khoutu yeo o ka e dirišago gape kae goba kae.

Ditiro tša go šoma

Dira gore keriti ya gago, e eteletšego pele, le go feta super tenyetsego ka go dira dipalo ka go fofa ka ditiro. Atisa, arola, oketša, le go tloša tsela ya gago go ya go CSS sanity.

Scaffolding le dikgokelo

@bodyBackground @white Mmala wa bokamorago bja letlakala
@textColor @grayDark Mmala wa sengwalwa wa maitirelo wa mmele ka moka, dihlogo, le tše dingwe
@linkColor #08c Mmala wa sengwalwa sa kgokagano ya tlwaelo
@linkColorHover darken(@linkColor, 15%) Mmala wa go šuthiša sengwalwa sa kgokagano ya tlwaelo

Tshepedišo ya keriti

@gridColumns 12.
@gridColumnWidth 60px e le
@gridGutterWidth 20px e le
@fluidGridColumnWidth 6,382978723% e le .
@fluidGridGutterWidth 2,127659574% e le .

Go thaepa

@sansFontFamily "Helvetica Neue", Helvetica, Arial, ntle le serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Motsamaisi o Mocha", sebaka se le seng
@baseFontSize 13px e le E swanetše go ba dipiksele
@baseFontFamily @sansFontFamily
@baseLineHeight 18px e le E swanetše go ba dipiksele
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Ditafola

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

Mebala ya sekala sa bohlooho

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

Mebala ya accent

@blue # 049cdb e le
@green #46a546 e le
@red # 9d261d
@yellow # ffc 40 d e
@orange # f89406 e le
@pink # c3325f
@purple #7a43b6

Dikarolo

Dikonope

@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

Diforomo

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

Foromo e re le ditemošo

@warningText # c09853 e leng
@warningBackground # f3edd2
@errorText # b94a48 e le
@errorBackground #f2dede
@successText #468847 e le
@successBackground # dff0d8
@infoText # 3a87ad
@infoBackground # d9edf7

Navbar

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

Di-dropdown tša go theoga

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

Yuniti ya mogale

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Mabapi le mixins

Di-mixin tša motheo

Mixin ya motheo gabotse ke akaretša goba karolo ya seripa sa CSS. Di ngwadilwe go swana le sehlopha sa CSS gomme di ka bitšwa kae goba kae.

  1. . elemente { .
  2. . go hlatswa ();
  3. } .

Di-mixin tša parametriki

Mixin ya parametric e swana le mixin ya motheo, eupša e amogela gape ditekanyetšo (ka fao leina) ka dikelo tša go se fetoge tša boikhethelo.

  1. . elemente { .
  2. . moedi - radius ( 4px );
  3. } .

Eketsa ya gago gabonolo

Mo e nyakilego go ba di-mixin ka moka tša Bootstrap di bolokilwe ka go mixins.less, e lego faele e makatšago ya .less ya utility yeo e go kgontšhago go diriša mixin go efe goba efe ya difaele tša .less ka gare ga sedirišwa.

Ka fao, tšwela pele gomme o diriše tšeo di lego gona goba ikwe o lokologile go oketša tša gago ka moo o nyakago.

Di-mixin tšeo di akareditšwego

Didirišwa tša go thuša

Mixin Ditekanyetšo Tšhomišo
.clearfix() ga go selo Oketša go motswadi ofe goba ofe go hlatswa diphaphamadi ka gare
.tab-focus() ga go selo Diriša setaele sa go tsepamiša kgopolo sa Webkit le thulaganyo ya nkgokolo ya Firefox
.center-block() ga go selo Auto setsi a bolokoe-boemo ba elements sebelisamargin: auto
.ie7-inline-block() ga go selo Diriša go tlaleletša go ka mehla display: inline-blockgo hwetša thekgo ya IE7
.size() @height @width Beha ka potlako bophahamo le bophara moleng o le mong
.square() @size E aga godimo .size()go beakanya bophara le bophagamo bjalo ka boleng bjo bo swanago
.opacity() @opacity Beha, ka dinomoro tse feletseng, phesente ya opacity (mohlala, "50" kapa "75") .

Diforomo

Mixin Ditekanyetšo Tšhomišo
.placeholder() @color: @placeholderText Beakanya placeholdermmala wa sengwalwa bakeng sa ditseno

Go thaepa

Mixin Ditekanyetšo Tšhomišo
#font > #family > .serif() ga go selo Dira gore elemente e šomiše mokgobo wa fonte ya serif
#font > #family > .sans-serif() ga go selo Dira gore elemente e šomiše mokgobo wa fonte ya sans-serif
#font > #family > .monospace() ga go selo Dira gore elemente e šomiše mokgobo wa fonte ya sekgoba se tee
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Habonolo beha fonte boholo, boima, le etellang pele
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Beakanya lapa la fonte go serif, gomme o laole bogolo, boima, le go eta pele
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Beakanya lapa la fonte go sans-serif, gomme o laole bogolo, boima, le go eta pele
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Beakanya lapa la fonte go monospace, gomme o laole bogolo, boima, le go eta pele

Tshepedišo ya keriti

Mixin Ditekanyetšo Tšhomišo
.container-fixed() ga go selo Hlama setshelo seo se tsepamego ka go rapalala sa go swara diteng tša gago
#grid > .core() @gridColumnWidth, @gridGutterWidth Hlagiša tshepedišo ya keriti ya dipiksele (setshelo, mothaladi, le dikholomo) ka n dikholomo le x pixel bophara gutter
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Hlagiša tshepedišo ya keriti ya phesente ka n dikholomo le x % ya sephara sa go tšhela meetse
#grid > .input() @gridColumnWidth, @gridGutterWidth Hlahisa dipikselse keriti tsamaiso bakeng sa inputelements, akhaonto bakeng sa padding le meeli
.makeColumn @columns: 1, @offset: 0 Fetoša efe goba efe divgo ba kholomo ya keriti ntle le .span*diklase

Dithoto tša CSS3

Mixin Ditekanyetšo Tšhomišo
.border-radius() @radius Round dikhutlo tsa elements. E ka ba boleng bjo tee goba dikelo tše nne tše di arotšwego ka sekgoba
.box-shadow() @shadow Oketša moriti wa go theoga go elemente
.transition() @transition Oketša phello ya phetogo ya CSS3 (mohlala, all .2s linear) .
.rotate() @degrees Dikološa elemente n likhato
.scale() @ratio Sekala elemente go n makga a bogolo bja yona bja mathomo
.translate() @x, @y Suthiša elemente godimo ga difofane tša x le y
.background-clip() @clip Sega mokokotlo wa elemente (e nago le mohola go border-radius) .
.background-size() @size Laola bogolo bja diswantšho tša ka morago ka CSS3
.box-sizing() @boxmodel Fetoša mohlala wa lepokisi bakeng sa elemente (mohlala, border-boxbakeng sa bophara bjo bo tletšego input) .
.user-select() @select Laola kgetho ya khesara ya sengwalwa letlakaleng
.backface-visibility() @visibility: visible Thibela go phadima ga diteng ge o šomiša diphetogo tša CSS 3D
.resizable() @direction: both Dira gore elemente efe goba efe e fetoše bogolo ka go le letona le ka fase
.content-columns() @columnCount, @columnGap: @gridGutterWidth Dira gore diteng tša elemente efe goba efe di šomiše dikholomo tša CSS3
.hyphens() @mode: auto CSS3 hyphenation ge o e nyaka (e akaretša word-wrap: break-word) .

Dimelo le dikelo

Mixin Ditekanyetšo Tšhomišo
#translucent > .background() @color: @white, @alpha: 1 Efa elemente mmala wa bokamorago wo o bonalago gabotse
#translucent > .border() @color: @white, @alpha: 1 Efa elemente mmala wa mollwane wo o bonagalago
#gradient > .vertical() @startColor, @endColor Hlama sefapano-sephephediši sa go ema sa bokamorago
#gradient > .horizontal() @startColor, @endColor Hlama sefapano-sephephediši sa go rapalala sa bokamorago
#gradient > .directional() @startColor, @endColor, @deg Hlama kelo ya morago ya tlhahlo ya sefapano-sephephediši
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Hlama sefapano-sephephediši sa mebala e meraro ya bokamorago
#gradient > .radial() @innerColor, @outerColor Hlama sefapano-sephephediši radial bokamorago gradient
#gradient > .striped() @color, @angle Hlama kelo ya morago ya methalo ya sefapano-sephephediši
#gradientBar() @primaryColor, @secondaryColor E šomišwa go dikonope go abela gradient le mollwane wo o lefsifsi go se nene
Ela hloko: Ge e le gore o romela kgopelo ya go goga go GitHub ka CSS ye e fetotšwego, o swanetše go kgoboketša CSS gape ka efe goba efe ya mekgwa ye.

Didirišwa tša go kgoboketša

Node le makefile

Tsenya mokgoboketši wa mola wa taelo wa LESS, JSHint, Recess, le uglify-js lefaseng ka bophara ka npm ka go sepetša taelo ye e latelago:

$ npm kenya -g ka tlase jshint sebaka uglify-js

Hang ha hlomamisa feela matha makeho tloha motso oa hao bootstrap directory le u kaofela behiloe.

Go tlaleletša, ge e ba o na le watchr yeo e hlomilwego, o ka kitima make watchgo ba le bootstrap yeo e agilwego lefsa ka go iketla nako le nako ge o rulaganya faele ka go bootstrap lib (se ga se nyakege, e fo ba mokgwa wa go ba bonolo).

Mola wa taelo

Tsenya sedirišwa sa mola wa taelo wa LESS ka Node gomme o sepetše taelo ye e latelago:

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

Kgonthiša gore o akaretša --compresska taelong yeo ge e ba o leka go boloka di-byte tše dingwe!

Javascript

Download Less.js ya moragorago gomme o akaretše tsela ya go ya go yona (le Bootstrap) go <head>.

<link rel = "letlakala la setaele/ka tlase" href = "/tsela/go/bootstrap.less" > <script src = "/tsela/go/ka tlase.js" ></script>  
 

Go kgoboketša gape difaele tša .less, e no di boloka gomme o laetše letlakala la gago gape. Less.js e di kgoboketša gomme e di boloka polokelong ya lefelong leo.

Tiriso ye e sego ya semmušo ya Mac

Sedirišwa sa Mac seo e sego sa semmušo se lebelela dipuku tša difaele tša .less gomme se kgoboketša khoutu go difaele tša lefelong leo ka morago ga go boloka mo gongwe le mo gongwe ga faele ya .less yeo e bogetšwego.

Ge o rata, o ka fetoša dikgetho ka go tirišo bakeng sa go fokotša ka go itiriša le gore ke tšhupetšo efe yeo difaele tše di kgobokeditšwego di feleletšago di le go yona.

Ditirišo tše dingwe tša Mac

Crunch ya go kgahla

Crunch ke morulaganyi le mokgoboketši wa go lebelega kudu wa LESS wo o agilwego go Adobe Air.

Kit ya Khoutu

E hlotšwe ke mošemane yo a swanago le tirišo ya Mac yeo e sego ya semmušo, CodeKit ke tirišo ya Mac yeo e kgoboketšago LESS, SASS, Stylus, le CoffeeScript.

Go hloka bonolo

Mac, Linux, le PC tiriso ye bakeng sa hula le lahlela bokella ya difaele LESS. Plus, khoutu ya mohlodi e ka GitHub .