LESS zazã kple Bootstrap

Trɔ asi le Bootstrap ŋu eye nàkekee ɖe enu kple LESS , si nye CSS ƒe dɔwɔwɔ do ŋgɔ, be nàwɔ tɔtrɔwo, mixins, kple bubu siwo wozã tsɔ tu Bootstrap ƒe CSS la ŋudɔ.

Nukatae WÒLE NU GBƆ?

Wowɔ Bootstrap kple LESS le eƒe nu vevitɔ me, si nye atsyãgbalẽ ƒe gbegbɔgblɔ si trɔna si mía xɔlɔ̃ nyui, Alexis Sellier wɔ . Enaa CSS si wotu ɖe ɖoɖowo dzi wɔwɔ kabakaba, nɔa bɔbɔe, eye wòvivina wu.

Nukae le eme?

Abe CSS ƒe kekeɖenu ene la, LESS lɔ tɔtrɔwo, mixins na kɔda ƒe akpa siwo woate ŋu azã ake, dɔwɔwɔwo na akɔntabubu bɔbɔe, nesting, kple amadede ƒe dɔwɔwɔwo gɔ̃ hã ɖe eme.

Srɔ̃ nu geɖe tso eŋu

LESS CSS ƑE NUÐEÐEŊUTI

Yi nyatakakadzraɖoƒe si dziɖuɖua ɖo le http://lesscss.org/ be nàsrɔ̃ nu geɖe.

Nusiwo trɔna

Amadedewo kple piksel ƒe asixɔxɔwo dzi kpɔkpɔ le CSS me ateŋu anye vevesese vie, zi geɖe la, kɔpi kple tsɔtsɔ de eme yɔa eme fũ. Gake menye kple LESS o—de amadedewo alo pixel ƒe asixɔxɔwo asi na tɔtrɔwo eye nàtrɔ wo zi ɖeka.

Nusiwo wotsɔ tsakae

Liƒo-radius gbeƒãɖeɖe etɔ̃ mawo siwo wòle be nàwɔ le ol' CSS edziedzi me? Fifia woɖiɖi va ɖo fli ɖeka dzi to mixins, code ƒe akpa aɖewo siwo nàte ŋu azã ake le afisiafi ƒe kpekpeɖeŋu me.

Dɔwɔwɔwo

Na wò grid, ŋgɔgbe, kple geɖe wu super flexible to akɔntabubu wɔwɔ le dzodzo me kple dɔwɔwɔwo. Dzidzi ɖe edzi, ma, tsɔ kpe ɖe eŋu, eye nàɖe wò mɔ si dzi nàto ayi CSS ƒe susuŋudɔwɔwɔ gbɔ la ɖa.

Scaffolding kple kadodowo

@bodyBackground @white Axa ƒe megbenyawo ƒe amadede
@textColor @grayDark Nuŋɔŋlɔ ƒe amadede si woɖo ɖi na ŋutilã bliboa, tanyawo, kple bubuwo
@linkColor #08c Kadodo ƒe nuŋɔŋlɔ ƒe amadede si woɖo ɖi
@linkColorHover darken(@linkColor, 15%) Default kadodo nuŋɔŋlɔ hover amadede

Grid ƒe ɖoɖo

@gridColumns 12. 12
@gridColumnWidth 60px ƒe didime
@gridGutterWidth 20px ƒe didime
@fluidGridColumnWidth 6.382978723% ƒe xexlẽme.
@fluidGridGutterWidth 2.127659574% ƒe xexlẽme.

Agbalẽtata ƒe nuŋɔŋlɔ

@sansFontFamily "Helvetica Neue", Helvetica, Arial, si me womewɔ naneke le o
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Amedɔdɔ Yeye", teƒe ɖeka
@baseFontSize 13px ƒe didime Ele be wòanye pikselwo
@baseFontFamily @sansFontFamily
@baseLineHeight 18px ƒe didime Ele be wòanye pikselwo
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Kplɔ̃wo

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

Amadede siwo le amadede dzẽ me

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

Accent ƒe amadedewo

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

Nusiwo le eme

Abɔtawo ƒe ƒuƒoƒo

@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

Kpekpeɖeŋugbalẽviwo

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

Kpe nɔnɔmewo kple nuxlɔ̃amewo ɖo

@warningText #c09853 ƒe ƒuƒoƒo
@warningBackground #f3edd2 ƒe ƒuƒoƒo
@errorText #b94a48 ƒe ƒuƒoƒo
@errorBackground #f2dede ƒe ƒuƒoƒo
@successText #468847 ƒe ƒuƒoƒo
@successBackground #dff0d8 ƒe ƒuƒoƒo
@infoText #3a87ad ƒe dzesi
@infoBackground #d9edf7 ƒe ƒuƒoƒo

Navbar ƒe ŋkɔ

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

Nusiwo wotsɔna ƒua gbe

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

Kalẽtɔ ƒe akpa aɖe

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Ku ɖe mixins ŋu

Mixin veviwo

Mixin vevi aɖe nye vevietɔ include alo akpa aɖe na CSS ƒe akpa aɖe. Woŋlɔ wo abe CSS ƒe klass ene eye woateŋu ayɔ wo le afisiafi.

  1. . element { .
  2. . ɖɔɖɔɖo si me kɔ ();
  3. } .

Parametric mixins ƒe ƒuƒoƒo

Parametric mixin le abe gɔmedze mixin ene, gake exɔa parameters hã (eyata ŋkɔe nye ema) kple asixɔxɔ gbãtɔ siwo woateŋu awɔ.

  1. . element { .
  2. . liƒo - didime ( 4px );
  3. } .

Tsɔ tɔwò kpe ɖe eŋu bɔbɔe

Wodzraa Bootstrap ƒe mixinwo katã kloe ɖo ɖe mixins.less me, si nye .less faɛl wɔnuku aɖe si zãa mixin le .less faɛl siwo le dɔwɔnuawo me la dometɔ ɖesiaɖe me.

Eyata, yi ŋgɔ nàzã esiwo li xoxo alo nàtsɔ tɔwò akpe ɖe eŋu faa alesi nèhiãe.

Mixins hã le eme

Dɔwɔnu Siwo Wozãna

Mixin ƒe ƒuƒoƒo Parameters ƒe nɔnɔmewo Zãzã
.clearfix() ɖeke o Tsɔ kpe ɖe dzila ɖesiaɖe ŋu be wòakɔ floats le eme
.tab-focus() ɖeke o Wɔ Webkit ƒe susu ƒe atsyã kple Firefox ƒe nɔnɔmetata goglo la ŋudɔ
.center-block() ɖeke o Auto titina a block-dzidzenu element zãmargin: auto
.ie7-inline-block() ɖeke o Zã kpe ɖe edziedzi display: inline-blockŋu be nàxɔ IE7 ƒe kpekpeɖeŋu
.size() @height @width Ðo kɔkɔme kple kekeme ɖe fli ɖeka dzi kaba
.square() @size Tu ɖe edzi .size()be wòaɖo kekeme kple kɔkɔme abe asixɔxɔ ɖeka ene
.opacity() @opacity Ðo, le xexlẽdzesi blibowo me, opacity ƒe alafa memamã (le kpɔɖeŋu me, "50" alo "75") .

Kpekpeɖeŋugbalẽviwo

Mixin ƒe ƒuƒoƒo Parameters ƒe nɔnɔmewo Zãzã
.placeholder() @color: @placeholderText Ðo placeholdernuŋɔŋlɔ ƒe amadede na nyawo tsɔtsɔ de eme

Agbalẽtata ƒe nuŋɔŋlɔ

Mixin ƒe ƒuƒoƒo Parameters ƒe nɔnɔmewo Zãzã
#font > #family > .serif() ɖeke o Na element aɖe nazã serif font stack
#font > #family > .sans-serif() ɖeke o Na element aɖe nazã sans-serif ŋɔŋlɔdzesiwo ƒe ƒuƒoƒo
#font > #family > .monospace() ɖeke o Na element aɖe nazã monospace font stack
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Ðo ŋɔŋlɔdzesi ƒe lolome, kpekpeme, kple ŋgɔdonya bɔbɔe
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Ðo ŋɔŋlɔdzesi ƒomea ɖe serif dzi, eye nàkpɔ lolome, kpekpeme, kple ŋgɔdonya dzi
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Ðo ŋɔŋlɔdzesi ƒomea ɖe sans-serif, eye nàkpɔ lolome, kpekpeme, kple ŋgɔdonya dzi
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Ðo ŋɔŋlɔdzesiwo ƒe ƒomea ɖe teƒe ɖeka, eye nàkpɔ lolome, kpekpeme, kple ŋgɔdonya dzi

Grid ƒe ɖoɖo

Mixin ƒe ƒuƒoƒo Parameters ƒe nɔnɔmewo Zãzã
.container-fixed() ɖeke o Wɔ nugoe si le titina le tsia dzi hena wò nyatakakawo léle ɖe asi
#grid > .core() @gridColumnWidth, @gridGutterWidth Wɔ pixel grid ɖoɖo (nugoe, fli, kple sɔtiwo) kple n sɔtiwo kple x pixel keke gutter
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Wɔ alafa memamã ƒe grid ɖoɖo si me n sɔtiwo kple x % keke gutter le
#grid > .input() @gridColumnWidth, @gridGutterWidth Wɔ pixel grid ɖoɖoa na inputelementwo, akɔntabubu na padding kple liƒowo
.makeColumn @columns: 1, @offset: 0 Trɔ ɖesiaɖe divwòazu grid column .span*klassawo manɔmee

CSS3 ƒe nɔnɔmewo

Mixin ƒe ƒuƒoƒo Parameters ƒe nɔnɔmewo Zãzã
.border-radius() @radius Tsɔ nu vevi aɖe ƒe dzogoewo ƒo xlãe. Ate ŋu anye asixɔxɔ ɖeka alo asixɔxɔ ene siwo dome dometsotso le
.box-shadow() @shadow Tsɔ vɔvɔli si le tsia dzi kpe ɖe element aɖe ŋu
.transition() @transition Tsɔ CSS3 ƒe tɔtrɔ ƒe ŋusẽkpɔɖeamedzi kpee (le kpɔɖeŋu me, all .2s linear) .
.rotate() @degrees Trɔ element aɖe n degree
.scale() @ratio Do nu vevi aɖe ɖe eƒe lolome gbãtɔ ƒe teƒe n
.translate() @x, @y Ʋu element aɖe le x kple y yameʋuwo dzi
.background-clip() @clip Kpe nu aɖe ƒe megbenya (si ɖea vi na border-radius) .
.background-size() @size Kpɔ megbe nɔnɔmetatawo ƒe lolome dzi to CSS3 dzi
.box-sizing() @boxmodel Trɔ aɖaka ƒe kpɔɖeŋu na element aɖe (le kpɔɖeŋu me, border-boxna full-width input) .
.user-select() @select Kpɔ nuŋɔŋlɔ siwo le axa aɖe dzi ƒe tiatia le cursor dzi
.backface-visibility() @visibility: visible Xɔ mɔ na nyatakakawo ƒe flitete ne èle CSS 3D ƒe tɔtrɔwo zãm
.resizable() @direction: both Na element ɖesiaɖe ƒe lolome nate ŋu atrɔ le ɖusime kple ete
.content-columns() @columnCount, @columnGap: @gridGutterWidth Na element ɖesiaɖe ƒe emenyawo nazã CSS3 sɔtiwo
.hyphens() @mode: auto CSS3 ƒe flitete ne èdi (elɔe ɖe eme word-wrap: break-word) .

Nusiwo dzɔ le megbe kple nusiwo le tsia dzi

Mixin ƒe ƒuƒoƒo Parameters ƒe nɔnɔmewo Zãzã
#translucent > .background() @color: @white, @alpha: 1 Na element aɖe ƒe megbe amadede si me kɔ nyuie
#translucent > .border() @color: @white, @alpha: 1 Na element aɖe ƒe liƒo ƒe amadede si me kɔ nyuie
#gradient > .vertical() @startColor, @endColor Wɔ cross-browser ƒe megbenyawo ƒe ʋuʋu le tsitrenu
#gradient > .horizontal() @startColor, @endColor Wɔ cross-browser ƒe megbenyawo ƒe ʋuʋu le tsia dzi
#gradient > .directional() @startColor, @endColor, @deg Wɔ cross-browser ƒe mɔfiame ƒe megbenyawo ƒe ʋuʋu
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Wɔ cross-browser ƒe amadede etɔ̃ ƒe megbenyawo ƒe ʋuʋu
#gradient > .radial() @innerColor, @outerColor Wɔ cross-browser radial megbenyawo ƒe ʋuʋu
#gradient > .striped() @color, @angle Wɔ atitsoga-browser ƒe megbenyawo ƒe ʋuʋu
#gradientBar() @primaryColor, @secondaryColor Wozãnɛ na abɔtawo tsɔ dea asi na gradient kple liƒo si do viviti vie
De dzesii: Ne èle hehebiabia ɖom ɖe GitHub kple CSS si woɖɔli la, ele be nàgbugbɔ aƒo CSS la nu ƒu to mɔnu siawo dometɔ aɖe dzi.

Dɔwɔnu siwo woatsɔ aƒo nu nu ƒu

Node kple makefile

De LESS sedede fli nuƒoƒoƒula, JSHint, Recess, kple uglify-js xexeame katã kple npm to sedede si gbɔna la zazã me:

$ npm ɖo -g si mesɔ gbɔ o jshint ƒe ɖiɖiɖeme uglify-js

Ne ènya de eme ko la, ɖeko nàƒu du maketso wò bootstrap directory ƒe ke me eye mi katã mieɖoe.

Gakpe ɖe eŋu la, ne watchr le asiwò la, àteŋu aƒu du make watchana bootstrap nagbugbɔ atu le eɖokui si ɣesiaɣi si nètrɔ asi le faɛl aɖe ŋu le bootstrap lib me (esia mehiã o, mɔnu si sɔ ko).

Sedede ƒe fli

De LESS sedede fli dɔwɔnu to Node dzi eye nàwɔ sedede si gbɔna:

$ lessc ./less/afɔɖeɖe.less > aʋadziɖuɖu.css

Kpɔ egbɔ be --compressyede sedede ma me ne èle agbagba dzem be yeadzra byte aɖewo ɖo!

Javascript ƒe nuŋɔŋlɔ

Wɔ Less.js yeyetɔ ƒe kɔpi eye nàde mɔ si dzi nàto ayi edzi (kple Bootstrap) ɖe <head>.

<link rel = "stylesheet/less" href = "/mɔ/yi/bootstrap.less" > <script src = "/mɔ/yi/le sue.js" ></script>  
 

Be nàgbugbɔ aƒo .less faɛlawo nu ƒu la, ɖeko nàdzra wo ɖo eye nàgbugbɔ akɔ wò axaa dzi. Less.js ƒoa wo nu ƒu eye wòdzraa wo ɖo ɖe nutoa me nudzraɖoƒe.

Mac ƒe dɔwɔnu si womewɔ le se nu o

Mac dɔwɔnu si womewɔ le se nu o la léa ŋku ɖe .less faɛlwo ƒe nyatakakadzraɖoƒewo ŋu eye wòƒoa kɔpiawo nu ƒu ɖe faɛl siwo le mia gbɔ me le .less faɛl si wokpɔ la dzraɖo ɖesiaɖe megbe.

Ne èdi la, àte ŋu atrɔ asi le nusiwo nèdi ŋu le dɔwɔnua me be nàte ŋu awɔ nu suesuesue siwo le eɖokui si kple nyatakakadzraɖoƒe si me faɛl siwo woƒo ƒu la ava wu enu ɖo.

Mac ƒe dɔwɔnu bubuwo

Crunch ƒe ƒuƒoƒo

Crunch nye LESS nuŋlɔla kple nuƒoƒoƒula si ƒe dzedzeme nyo ŋutɔ si wotu ɖe Adobe Air dzi.

CodeKit ƒe ƒuƒoƒo

Ŋutsu ɖeka ma ke wɔe kple Mac dɔwɔnu si womewɔ le se nu o, CodeKit nye Mac dɔwɔnu si ƒoa LESS, SASS, Stylus, kple CoffeeScript nu ƒu.

Nu bɔbɔe aɖeke mele eme o

Mac, Linux, kple PC dɔwɔɖoɖo si wotsɔ hea LESS faɛlwo nuƒoƒoƒu kple wo tsɔtsɔ ƒu gbe. Gakpe ɖe eŋu la, dzɔtsoƒe ƒe nuŋɔŋlɔa le GitHub .