Bi Bootstrap re LESS bikar tînin

Bootstrap-ê bi LESS -ê, pêş-processorek CSS-ê, xweş bikin û dirêj bikin, da ku ji guhêrbar, mixîn û yên din ên ku ji bo avakirina CSS-ya Bootstrap têne bikar anîn sûd werbigirin.

Çima KÊM?

Bootstrap di bingehê xwe de bi LESS ve hatî çêkirin, zimanek şêwazek dînamîkî ku ji hêla hevalê me yê baş, Alexis Sellier ve hatî afirandin . Ew pêşveçûna pergalên-based CSS zûtir, hêsantir û bêtir kêfxweş dike.

Çi tê de heye?

Wekî dirêjkirina CSS-ê, LESS guhêrbar, mixînên ji bo perçeyên kodê yên ji nû ve bi kar anîn, operasyonên ji bo matematîkî yên hêsan, hêlîn, û hetta fonksiyonên rengîn vedihewîne.

Bêtir hîn bibin

KÊM CSS

Serdana malpera fermî ya http://lesscss.org/ bikin ku bêtir fêr bibin.

Variables

Birêvebirina reng û nirxên pixelê di CSS-ê de dibe ku piçek êş be, bi gelemperî tijî kopî û paste. Lêbelê ne bi KÊMÊ - rengan an nirxên pixelê wekî guhêrbar destnîşan bikin û wan carekê biguhezînin.

Mixins

Ew sê daxuyaniyên radyoya sînor ku hûn hewce ne ku di CSS-ya birêkûpêk de bikin? Naha ew bi arîkariya mixins, perçeyên kodê ku hûn dikarin li her deverê ji nû ve bikar bînin daketin yek rêzê.

Operasyonên

Bi kirina matematîkê bi operasyonan re tevna xwe, pêşeng û super maqûltir bikin. Riya xwe ya berbi aqilmendiya CSS-ê zêde bikin, dabeş bikin, lê zêde bikin û kêm bikin.

Skeffolding û girêdan

@bodyBackground @white Rengê paşxaneya rûpelê
@textColor @grayDark Rengê nivîsê ya xwerû ji bo tevahiya laş, sernav û hêj bêtir
@linkColor #08c Rengê nivîsa lînka xwerû
@linkColorHover darken(@linkColor, 15%) Rengê hêlînê nivîsa lînka xwerû

sîstema Grid

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6.382978723%
@fluidGridGutterWidth 2.127659574%

Tîpografi

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Courier New", monospace
@baseFontSize 13px Divê pixel be
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Divê pixel be
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Tables

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

Rengên gewr

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

Rengên devkî

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

Components

Buttons

@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

Forms

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

Dewlet û hişyariyan çêbikin

@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

Yekîneya Hero

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Der barê mixins

Miksên bingehîn

Miksek bingehîn bi bingehîn ji bo perçeyek CSS-ê tevlêbûnek an parçeyek e. Ew mîna çînek CSS-ê têne nivîsandin û dikarin li her deverê bêne gazî kirin.

  1. . element {
  2. . zelalfix ();
  3. }

Mîksên Parametrîk

Mîksek parametrîkî mîna mîksînek bingehîn e, lê ew di heman demê de pîvanan (ji ber vê yekê nav) bi nirxên xwerû yên vebijarkî jî qebûl dike.

  1. . element {
  2. . sînor - radius ( 4px );
  3. }

Bi hêsanî ya xwe lê zêde bike

Hema hema hemî mîksên Bootstrap di mixins.less de têne hilanîn, pelek .less ya hêja ku dihêle hûn di pelên .kêm ên amûrê de mixin bikar bînin.

Ji ber vê yekê, pêşde biçin û yên heyî bikar bînin an jî xwe azad bikin ku hûn hewceyê xwe zêde bikin.

Miksên tê de hene

Utilities

Mixin Parametreyên Bikaranîna
.clearfix() netû Li her dêûbav zêde bikin da ku floatên di hundurê de paqij bikin
.tab-focus() netû Şêweya fokusê ya Webkit-ê û nexşeya Firefox-ê li dora xwe bicîh bînin
.center-block() netû Otomotîk hêmanek asta blokê bikar tîne navendmargin: auto
.ie7-inline-block() netû Ji bilî birêkûpêk bikar bînin display: inline-blockda ku piştgiriya IE7 bistînin
.size() @height @width Bi lez bilindahî û firehiyê li ser yek rêzê bicîh bikin
.square() @size Li ser .size()ava dike ku firehî û bilindahî wekî heman nirxê destnîşan bike
.opacity() @opacity Bi tevahî hejmaran, rêjeya nezelaliyê destnîşan bikin (mînak, "50" an "75")

Forms

Mixin Parametreyên Bikaranîna
.placeholder() @color: @placeholderText Ji bo placeholdertêketinê rengê nivîsê saz bikin

Tîpografi

Mixin Parametreyên Bikaranîna
#font > #family > .serif() netû Hêmanek çêbikin stek tîpên serif bikar bînin
#font > #family > .sans-serif() netû Hêmanek çêbikin stek tîpên sans-serif bikar bînin
#font > #family > .monospace() netû Hêmanek çêbikin ku stûnek tîpên monospace bikar bîne
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Mezinahiya fontê, giranî û sereke bi hêsanî saz bikin
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Malbata tîpan li ser serif saz bikin, û mezinahî, giranî û sereke kontrol bikin
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Malbata tîpan li ser sans-serif bicîh bikin, û mezinahî, giranî û sereke kontrol bikin
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Malbata tîpan li monospace bicîh bikin, û mezinahî, giranî û pêşengiyê kontrol bikin

sîstema Grid

Mixin Parametreyên Bikaranîna
.container-fixed() netû Ji bo ku hûn naveroka xwe bigirin konteynirek navendek horizontî biafirînin
#grid > .core() @gridColumnWidth, @gridGutterWidth Bi n stûnan û x pixel gemarê fireh pergalek tora pixel (konteyner, rêz û stûn) biafirînin.
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Pergalek torê ya ji sedî bi n stûnan û x % gûzê fireh biafirînin
#grid > .input() @gridColumnWidth, @gridGutterWidth Pergala tora pixel ji bo inputhêmanan, hesabkirina padding û sînoran biafirînin
.makeColumn @columns: 1, @offset: 0 Her yekê bêyî dersan divveguherînin stûnek torê.span*

Taybetmendiyên CSS3

Mixin Parametreyên Bikaranîna
.border-radius() @radius Kuçên hêmanekê dor bikin. Dikare nirxek yek an çar nirxên cihê-veqetandî be
.box-shadow() @shadow Siya dilopekê li hêmanekê zêde bikin
.transition() @transition Bandora veguherîna CSS3 zêde bike (mînak, all .2s linear)
.rotate() @degrees Elementek n dereceyan bizivirîne
.scale() @ratio Pîvanek hêmanek bi n -ê mezinahiya wê ya orjînal bikin
.translate() @x, @y Li ser x û y-yê hêmanekê bigerînin
.background-clip() @clip Paşîna hêmanek bibire (bikêr e border-radius)
.background-size() @size Mezinahiya wêneyên paşîn bi CSS3 ve kontrol bikin
.box-sizing() @boxmodel Modela qutikê ji bo hêmanek biguhezîne (mînak, border-boxji bo firehiyek tevahî input)
.user-select() @select Hilbijartina cursorê ya nivîsê li ser rûpelê kontrol bikin
.backface-visibility() @visibility: visible Dema ku veguherînên CSS 3D bikar bînin pêşîlêgirtina naverokê bigirin
.resizable() @direction: both Li rast û binî her hêmanek ji nû ve mezinbûnê çêbikin
.content-columns() @columnCount, @columnGap: @gridGutterWidth Naveroka her hêmanek stûnên CSS3 bikar bînin
.hyphens() @mode: auto Dema ku hûn dixwazin xêzkirina CSS3 (di nav de word-wrap: break-word)

Paşnav û gradient

Mixin Parametreyên Bikaranîna
#translucent > .background() @color: @white, @alpha: 1 Rengek paşnavê ya şefaf bide elementek
#translucent > .border() @color: @white, @alpha: 1 Ji hêmanekê re rengê sînorê şefaf bidin
#gradient > .vertical() @startColor, @endColor Gerokek paşîn a vertîkal a cross-browser biafirînin
#gradient > .horizontal() @startColor, @endColor Gerokek paşîn a horizontî ya cross-browser biafirînin
#gradient > .directional() @startColor, @endColor, @deg Gerokek paşîn a rênîşander a cross-browser biafirînin
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Gerokek paşîn a sê-rengî ya xaça gerokê biafirînin
#gradient > .radial() @innerColor, @outerColor Gerokek paşîn a radîkal a cross-browser biafirînin
#gradient > .striped() @color, @angle Gerokek paşîn a xaç-gerokê biafirînin
#gradientBar() @primaryColor, @secondaryColor Ji bo bişkokan tê bikar anîn da ku qonaxek hûrgelek û hinekî tarîtir destnîşan bike
Nîşe: Heke hûn bi CSS-ya guhertî daxwazek kişandinê ji GitHub re dişînin, divê hûn CSS-ê bi yek ji van rêbazan ji nû ve berhev bikin.

Amûrên berhevkirinê

Node bi makefile

Berhevkarê rêza fermanê LESS, JSHint, Recess, û uglify-js li seranserê cîhanê bi npm ve saz bikin û fermana jêrîn bicîh bikin:

$ npm saz bike -g kêmtir jshint recess uglify-js

Piştî ku hatî saz kirin tenê ji makekoka pelrêça bootstrap-a xwe bimeşîne û hûn hemî amade ne.

Wekî din, heke we watchr saz kiriye, dibe ku hûn make watchher carê ku hûn pelek di lib bootstrap-ê de biguherînin (ev ne hewce ye, tenê rêbazek hêsan e) bi rê ve bibin ku bootstrap bixweber ji nû ve were çêkirin.

Rêza fermanê

Amûra rêza fermanê LESS bi navgîniya Node saz bikin û emrê jêrîn bimeşînin:

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

--compressGer hûn hewl didin ku hin bytes hilînin, pê ewle bin ku hûn di wê fermanê de bicîh bikin!

Javascript

Less.js-a herî dawî dakêşin û rêça wê (û Bootstrap) di nav <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" </script>  
 

Ji bo ku pelên .less ji nû ve berhev bikin, tenê wan hilînin û rûpela xwe ji nû ve bar bikin. Less.js wan berhev dike û di hilanîna herêmî de hilîne.

Serlêdana nefermî ya Mac

Serlêdana nefermî ya Mac- ê li pelrêçên pelên .kêm temaşe dike û piştî her tomarkirina pelek .kêm hatî temaşekirin kodê li pelên herêmî berhev dike.

Heke hûn bixwazin, hûn dikarin tercihên di sepanê de ji bo kêmkirina otomatîkî biguhezînin û pelên berhevkirî di kîjan pelrêça de diqedin.

Zêdetir sepanên Mac

Crunch

Crunch edîtor û berhevkarek Kêmtir e ku li ser Adobe Air hatî çêkirin e.

CodeKit

CodeKit ji hêla heman zilamê ve wekî sepana Mac-ê ya nefermî ve hatî afirandin, serîlêdanek Mac-ê ye ku LESS, SASS, Stylus û CoffeeScript berhev dike.

Simpless

Serlêdana Mac, Linux, û PC-ê ji bo berhevkirina pelên KÊM bikişîne û davêje. Zêdeyî, koda çavkaniyê li ser GitHub e .