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.

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

KELY CSS

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.

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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

Hero unit

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

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.

  1. . singa {
  2. . clearfix ();
  3. }

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.

  1. . singa {
  2. . sisintany - radius ( 4px );
  3. }

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 isan-jato 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
.hyphens() @mode: auto CSS3 hyphenation rehefa tianao izany (anisan'izany word-wrap: break-word)

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
Fanamarihana: Raha mandefa fangatahana misintona amin'ny GitHub ianao miaraka amin'ny CSS novaina, dia tsy maintsy mamerina ny CSS amin'ny alalan'ireo fomba ireo ianao.

Fitaovana fanangonana

Node miaraka amin'ny makefile

Mametraka ny LESS command line compiler, JSHint, Recess, ary uglify-js maneran-tany miaraka amin'ny npm amin'ny alàlan'ny fampandehanana ity baiko manaraka ity:

$ npm install -g less jshint recess 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 .