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ɔ.
Wotue kple LESS
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.
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.
Bootstrap ƒe tɔtrɔwo LESS tɔtrɔwo, woƒe asixɔxɔwo, kple zazã ŋuti mɔfiamewo
Hyperlinkwo ƒe kadodowo
@linkColor |
#08c ƒe ƒuƒoƒo | 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ɔ
@baseFontSize |
13px ƒe didime |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px ƒe didime |
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
@primaryButtonBackground |
@linkColor |
Kpekpeɖeŋugbalẽviwo
@placeholderText |
@grayLight |
Navbar ƒe ŋkɔ
@navbarHeight |
40px ƒe didime | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
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 |
Bootstrap ƒe mixins
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.
- . element { .
- . ɖɔɖɔɖo si me kɔ ();
- } .
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ɔ.
- . element { .
- . liƒo - didime ( 4px );
- } .
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 si le 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: 5px, @width: 5px |
Ðo kɔkɔme kple kekeme ɖe fli ɖeka dzi kaba |
.square() |
@size: 5px |
Tu ɖe edzi .size()be wòaɖo kekeme kple kɔkɔme abe asixɔxɔ ɖeka ene |
.opacity() |
@opacity: 100 |
Ð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ɔ precent grid ɖoɖo si me n sɔtiwo kple x % keke gutter |
CSS3 ƒe nɔnɔmewo
| Mixin ƒe ƒuƒoƒo | Parameters ƒe nɔnɔmewo | Zãzã |
|---|---|---|
.border-radius() |
@radius: 5px |
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: 0 1px 3px rgba(0,0,0,.25) |
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: 0, @y: 0 |
Ʋ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 |
.resizable() |
@direction: both |
Na element ɖesiaɖe ƒe lolome nate ŋu atrɔ le ɖusime kple ete |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Na element ɖesiaɖe ƒe emenyawo nazã CSS3 sɔtiwo |
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 |
Bootstrap ƒe ƒuƒoƒo kple LESS
Dɔwɔnu siwo woatsɔ aƒo nu nu ƒu
Node kple makefile
De LESS sedede fli nuƒoƒoƒula kple uglify-js xexeame katã kple npm to sedede si gbɔna la wɔwɔ me:
$ npm ɖo -g less 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 ./lib/adze egɔme.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ɔna ƒoa LESS faɛlwo nu ƒu kple esiwo wotsɔna ƒua gbe. Gakpe ɖe eŋu la, dzɔtsoƒe ƒe nuŋɔŋlɔa le GitHub .