Mampiasa LESS miaraka amin'ny Bootstrap
Manamboara sy manitatra ny Bootstrap miaraka amin'ny LESS , CSS preprocessor, mba hanararaotra ireo fari-pahalalana, mixins, ary maro hafa ampiasaina amin'ny fananganana CSS Bootstrap.
Namboarina tamin'ny LESS
Nahoana no KELY?
Ny Bootstrap dia vita amin'ny LESS amin'ny fotony, fiteny dynamic stylesheet noforonin'ny namantsika akaiky, Alexis Sellier . Izany dia mahatonga ny fampivoarana CSS mifototra amin'ny rafitra haingana kokoa, mora kokoa ary mahafinaritra kokoa.
Inona no tafiditra?
Amin'ny maha fanitarana ny CSS, ny LESS dia ahitana fari-pahalalana, mixins ho an'ny sombin-kaody azo ampiasaina indray, fampandehanana ho an'ny matematika tsotra, fanatobiana, ary na ny loko.
Hamantatra bebe kokoa
Tsidiho ny tranokala ofisialy ao amin'ny http://lesscss.org/ raha te hahalala bebe kokoa.
hiovaova
Ny fitantanana ny loko sy ny sandan'ny pixel ao amin'ny CSS dia mety ho fanaintainana kely, matetika feno kopia sy mametaka. Tsy miaraka amin'ny LESS na izany aza - manendre loko na sanda pixel ho miovaova ary ovay indray mandeha.
Mixins
Ireo fanambarana sisintany telo tokony hataonao amin'ny CSS mahazatra? Ankehitriny dia midina amin'ny andalana iray izy ireo miaraka amin'ny fanampian'ny mixins, sombin-kaody azonao ampiasaina na aiza na aiza.
asa
Ataovy moramora kokoa amin'ny alàlan'ny fanaovana ny kajikajy amin'ny sidina miaraka amin'ny asa ny grid-nao, ny fitarihana ary ny fahaiza-manaonao. Ampitomboy, zarao, ampio ary esorinao ny lalanao mankany amin'ny CSS sanity.
Bootstrap variables LESS variables, ny sandany ary ny torolalana fampiasana
Scaffolding sy rohy
@bodyBackground |
@white |
Loko ambadiky ny pejy | |
@textColor |
@grayDark |
Loko lahatsoratra default ho an'ny vatana manontolo, lohateny, ary maro hafa | |
@linkColor |
#08c |
Loko lahatsoratra rohy default | |
@linkColorHover |
darken(@linkColor, 15%) |
Loko hover texte default |
Rafitra Grid
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Typography
@sansFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif | |
@serifFontFamily |
Georgia, "Times New Roman", Times, serif |
|
@monoFontFamily |
Menlo, Monaco, "Courier New", monospace | |
@baseFontSize |
13px | Tokony ho pixel |
@baseFontFamily |
@sansFontFamily |
|
@baseLineHeight |
18px | Tokony ho pixel |
@altFontFamily |
@serifFontFamily |
|
@headingsFontFamily |
inherit |
|
@headingsFontWeight |
bold |
|
@headingsColor |
inherit |
|
latabatra
@tableBackground |
transparent |
@tableBackgroundAccent |
#f9f9f9 |
@tableBackgroundHover |
#f5f5f5 |
@tableBorder |
ddd |
Loko grayscale
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
Loko accent
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
singa
bokotra
@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 |
teny
@placeholderText |
@grayLight |
@inputBackground |
@white |
@inputBorder |
#ccc |
@inputBorderRadius |
3px |
@inputDisabledBackground |
@grayLighter |
@formActionsBackground |
#f5f5f5 |
Fametrahana fanjakana sy fanairana
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@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 |
Dropdowns
@dropdownBackground |
@white |
@dropdownBorder |
rgba(0,0,0,.2) |
@dropdownLinkColor |
@grayDark |
@dropdownLinkColorHover |
@white |
@dropdownLinkBackgroundHover |
@linkColor |
Hero unit
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
Bootstrap mixins
Momba ny mixins
Mixins fototra
Ny mixin fototra dia ny fampidirana na ampahany amin'ny sombintsombin'ny CSS. Izy ireo dia nosoratana toy ny kilasy CSS ary azo antsoina na aiza na aiza.
- . singa {
- . clearfix ();
- }
Parametric mixins
Ny mixin paramétrique dia mitovy amin'ny mixin fototra ihany, fa manaiky ihany koa ny masontsivana (noho izany ny anarana) miaraka amin'ny soatoavina tsy mety.
- . singa {
- . sisintany - radius ( 4px );
- }
Ampio mora foana ny anao
Saika ny mixins Bootstrap rehetra dia voatahiry ao amin'ny mixins.less, rakitra .less mahafinaritra izay ahafahanao mampiasa mixin amin'ny rakitra .less ao amin'ny kitapom-pitaovana.
Noho izany, mandehana ary ampiasao ny efa misy na aza misalasala manampy ny anao araka izay ilainao.
Tafiditra mixins
Asa vaventy
| Mixin | masontsivana | Fampiasana |
|---|---|---|
.clearfix() |
tsy misy | Ampio amin'ny ray aman-dreny rehetra hanadio ny mitsingevana ao anatiny |
.tab-focus() |
tsy misy | Ampiharo ny fomba fifantohana amin'ny Webkit ary manodidina ny drafitra Firefox |
.center-block() |
tsy misy | Auto center singa ambaratonga sakana iray mampiasamargin: auto |
.ie7-inline-block() |
tsy misy | Ampiasao ho fanampin'ny mahazatra display: inline-blockhahazoana fanohanana IE7 |
.size() |
@height @width |
Apetraho haingana amin'ny tsipika iray ny haavony sy ny sakany |
.square() |
@size |
Miorina amin'ny .size()fametrahana ny sakany sy ny haavony ho sanda mitovy |
.opacity() |
@opacity |
Apetraho amin'ny isa manontolo ny isan-jaton'ny opacity (oh: "50" na "75") |
teny
| Mixin | masontsivana | Fampiasana |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Apetraho ny placeholderlokon'ny lahatsoratra ho an'ny fampidirana |
Typography
| Mixin | masontsivana | Fampiasana |
|---|---|---|
#font > #family > .serif() |
tsy misy | Manamboara singa iray mampiasa stack serif font |
#font > #family > .sans-serif() |
tsy misy | Manamboara singa iray mampiasa stack font sans-serif |
#font > #family > .monospace() |
tsy misy | Manamboara singa iray mampiasa stack monospace font |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Apetraho mora ny haben'ny endri-tsoratra, ny lanjany ary ny fitarihana |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Apetraho amin'ny serif ny fianakaviamben'ny endri-tsoratra, ary fehezo ny habeny, ny lanjany ary ny fitarihana |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Apetraho amin'ny sans-serif ny fianakaviamben'ny endri-tsoratra, ary fehezo ny habeny, ny lanjany ary ny fitarihana |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Apetraho amin'ny monospace ny fianakaviamben'ny endri-tsoratra, ary fehezo ny habeny, ny lanjany ary ny fitarihana |
Rafitra Grid
| Mixin | masontsivana | Fampiasana |
|---|---|---|
.container-fixed() |
tsy misy | Mamorona kaontenera mitsivalana afovoany hitazomana ny atiny |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Mamorona rafitra grid piksel (efitrano, andalana, ary tsanganana) miaraka amin'ny tsanganana n sy x mivelatra piksel |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
Mamorona rafitra grid teo aloha misy tsanganana n sy x % sakany |
#grid > .input() |
@gridColumnWidth, @gridGutterWidth |
Mamorona rafitra grid piksel ho an'ny inputsinga, kajy ny padding sy sisintany |
.makeColumn |
@columns: 1, @offset: 0 |
Avadiho divho tsanganana grid izay tsy misy .span*kilasy |
CSS3 fananana
| Mixin | masontsivana | Fampiasana |
|---|---|---|
.border-radius() |
@radius |
Manodidina ny zoron'ny singa iray. Mety ho sanda tokana na sanda efatra misaraka toerana |
.box-shadow() |
@shadow |
Ampio aloka mitete amin'ny singa iray |
.transition() |
@transition |
Ampio ny effet transition CSS3 (oh, all .2s linear) |
.rotate() |
@degrees |
Ahodina singa iray n degre |
.scale() |
@ratio |
Ampitomboy ny singa iray ho avoakan'ny haben'ny tany am-boalohany |
.translate() |
@x, @y |
Manetsika singa iray amin'ny fiaramanidina x sy y |
.background-clip() |
@clip |
Hetezo ny lafin'ny singa iray (ilaina ho an'ny border-radius) |
.background-size() |
@size |
Mifehy ny haben'ny sary lafika amin'ny alàlan'ny CSS3 |
.box-sizing() |
@boxmodel |
Ovay ny maodelin'ny boaty ho an'ny singa iray (oh, border-boxho an'ny sakany feno input) |
.user-select() |
@select |
Hifehy ny fifantenana ny cursor lahatsoratra amin'ny pejy iray |
.backface-visibility() |
@visibility: visible |
Atsaharo ny flickering votoaty rehefa mampiasa CSS 3D transforms |
.resizable() |
@direction: both |
Ataovy izay singa azo ovaina eo amin'ny ankavanana sy ambany |
.content-columns() |
@columnCount, @columnGap: @gridGutterWidth |
Ataovy ny votoatin'ny singa rehetra mampiasa tsanganana CSS3 |
Fototra sy gradients
| Mixin | masontsivana | Fampiasana |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
Omeo singa iray ny loko fototra mangarahara |
#translucent > .border() |
@color: @white, @alpha: 1 |
Omeo singa iray loko sisin-tany mangarahara |
#gradient > .vertical() |
@startColor, @endColor |
Mamorona gradient mitsangana mitsangana eo amin'ny navigateur |
#gradient > .horizontal() |
@startColor, @endColor |
Mamorona gradient background horizontaly cross-browser |
#gradient > .directional() |
@startColor, @endColor, @deg |
Mamoròna gradient tori-dàlamby miampita navigateur |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Mamorona rindran-damina miloko telo miloko cross-browser |
#gradient > .radial() |
@innerColor, @outerColor |
Mamorona gradient background radial cross-browser |
#gradient > .striped() |
@color, @angle |
Mamorona gradient ambadika misy miolakolaka amin'ny navigateur |
#gradientBar() |
@primaryColor, @secondaryColor |
Ampiasaina amin'ny bokotra hanisy gradient sy sisintany somary maizina kokoa |
Manangona Bootstrap miaraka amin'ny LESS
Fitaovana fanangonana
Node miaraka amin'ny makefile
Mametraka ny LESS command line compiler sy uglify-js maneran-tany miaraka amin'ny npm amin'ny alàlan'ny fampandehanana ity baiko manaraka ity:
$ npm install -g less uglify-js
Rehefa tafapetraka dia mandehana fotsiny makeavy amin'ny fakan'ny lahatahiry bootstrap anao ary efa vonona ianao.
Fanampin'izany, raha toa ka nametraka watchr ianao, dia mety hihazakazaka make watchhanangana bootstrap ho azy ianao isaky ny manova rakitra ao amin'ny bootstrap lib ianao (tsy ilaina izany, fomba tsotra fotsiny).
Fibaikoana
Ampidiro ny fitaovana tsipika LESS amin'ny alàlan'ny Node ary araho ity baiko manaraka ity:
$ lessc ./less/bootstrap.less > bootstrap.css
Ataovy azo antoka fa ampidirina --compressao amin'io baiko io ianao raha manandrana mamonjy bytes!
Javascript
Ampidino ny Less.js farany ary ampidiro ny lalana mankany aminy (sy Bootstrap) ao amin'ny <head>.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Raha te hanangona indray ireo rakitra .less dia tehirizo fotsiny izy ireo ary avereno avereno ny pejinao. Less.js dia manangona azy ireo ary mitahiry azy ireo amin'ny fitahirizana eo an-toerana.
Fampiharana Mac tsy ofisialy
Ny fampiharana Mac tsy ofisialy dia mijery lahatahiry misy rakitra .less ary manangona ny kaody ho any amin'ny rakitra eo an-toerana isaky ny mitahiry rakitra .less nojerena.
Raha tianao dia azonao atao ny manova ny safidinao ao amin'ny fampiharana ho an'ny fampihenana mandeha ho azy ary ny lahatahiry misy ny rakitra natambatra.
Fampiharana Mac bebe kokoa
Crunch
Crunch dia tonian-dahatsoratra LESS tsara tarehy sy mpamoron-kira namboarina tamin'ny Adobe Air.
CodeKit
Noforonin'ilay lehilahy mitovy amin'ny fampiharana Mac tsy ofisialy, CodeKit dia rindranasa Mac izay manangona LESS, SASS, Stylus, ary CoffeeScript.
Simple
Fampiharana Mac, Linux, ary PC ho an'ny fisintonana sy fanalana ny rakitra LESS. Ankoatra izany, ny kaody loharano dia ao amin'ny GitHub .