Përdorimi i LESS me Bootstrap

Personalizojeni dhe zgjeroni Bootstrap me LESS , një paraprocesor CSS, për të përfituar nga variablat, miksat dhe më shumë që përdoren për të ndërtuar CSS-në e Bootstrap.

Pse PAK?

Bootstrap është bërë me LESS në thelbin e tij, një gjuhë dinamike e fletëve të stilit e krijuar nga miku ynë i mirë, Alexis Sellier . E bën zhvillimin e CSS të bazuar në sisteme më të shpejtë, më të lehtë dhe më argëtues.

Çfarë përfshihet?

Si një zgjerim i CSS, LESS përfshin variabla, miks për copa të kodit të ripërdorshme, operacione për matematikë të thjeshtë, fole, madje edhe funksione ngjyrash.

Mëso më shumë

PAK CSS

Vizitoni faqen zyrtare në http://lesscss.org/ për të mësuar më shumë.

Variablat

Menaxhimi i ngjyrave dhe vlerave të pikselëve në CSS mund të jetë paksa i mundimshëm, zakonisht plot kopjim dhe ngjitje. Megjithatë, jo me LESS - caktoni ngjyrat ose vlerat e pikselit si variabla dhe ndryshoni ato një herë.

Përzierjet

Këto tre deklarata të rrezes kufitare që duhet të bëni në CSS të rregullt? Tani ato janë deri në një rresht me ndihmën e mikseve, copa kodi që mund t'i ripërdorni kudo.

Operacionet

Bëjeni rrjetin tuaj, drejtues dhe më super fleksibël duke bërë llogaritë në fluturim me operacionet. Shumëzoni, ndani, shtoni dhe zbrisni rrugën tuaj drejt mendjes CSS.

Skelat dhe lidhjet

@bodyBackground @white Ngjyra e sfondit të faqes
@textColor @grayDark Ngjyra e parazgjedhur e tekstit për të gjithë trupin, titujt dhe më shumë
@linkColor #08c Ngjyra e parazgjedhur e tekstit të lidhjes
@linkColorHover darken(@linkColor, 15%) Ngjyra e pezullimit të tekstit të parazgjedhur të lidhjes

Sistemi i rrjetit

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

Tipografia

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monako, "Courier New", monospace
@baseFontSize 13 px Duhet të jetë piksel
@baseFontFamily @sansFontFamily
@baseLineHeight 18 px Duhet të jetë piksel
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Tabelat

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

Ngjyra gri

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

Ngjyrat e theksit

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

Komponentët

Butonat

@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

Format

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

Formoni gjendjet dhe alarmet

@warningText #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #dff0d8
@infoText #3a87ad
@infoBackground #d9edf7

Navbar

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

Njësia heroike

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Rreth mikseve

Përzierjet bazë

Një mixin bazë është në thelb një përfshirje ose një pjesë e një fragmenti të CSS. Ato janë shkruar si një klasë CSS dhe mund të thirren kudo.

  1. . elementi {
  2. . sqarim ();
  3. }

Përzierjet parametrike

Një miks parametrik është njësoj si një miks bazë, por pranon gjithashtu parametra (prandaj emri) me vlera të paracaktuara opsionale.

  1. . elementi {
  2. . kufiri - rrezja ( 4px );
  3. }

Shtoni lehtësisht tuajën

Pothuajse të gjitha mixin-et e Bootstrap ruhen në mixins.less, një skedar i mrekullueshëm .less që ju mundëson të përdorni një mixin në cilindo nga skedarët .less në paketën e veglave.

Pra, vazhdoni dhe përdorni ato ekzistueset ose mos ngurroni të shtoni tuajat sipas nevojës.

Përzierje të përfshira

Shërbimet komunale

Përzierje Parametrat Përdorimi
.clearfix() asnje Shto te ndonjë prind për të pastruar notat brenda
.tab-focus() asnje Aplikoni stilin e fokusimit të Webkit dhe skicën e rrumbullakët të Firefox-it
.center-block() asnje Përqendroni automatikisht një element në nivel blloku duke përdorurmargin: auto
.ie7-inline-block() asnje Përdorni përveç të rregulltit display: inline-blockpër të marrë mbështetje për IE7
.size() @height @width Vendosni shpejt lartësinë dhe gjerësinë në një rresht
.square() @size Ndërtohet për .size()të vendosur gjerësinë dhe lartësinë si të njëjtën vlerë
.opacity() @opacity Vendosni, në numra të plotë, përqindjen e tejdukshmërisë (p.sh., "50" ose "75")

Format

Përzierje Parametrat Përdorimi
.placeholder() @color: @placeholderText Vendosni placeholderngjyrën e tekstit për hyrjet

Tipografia

Përzierje Parametrat Përdorimi
#font > #family > .serif() asnje Bëni një element të përdorë një grumbull fonti serif
#font > #family > .sans-serif() asnje Bëni një element të përdorë një grumbull fonti sans-serif
#font > #family > .monospace() asnje Bëni një element të përdorë një pirg fonti monospace
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Vendosni lehtësisht madhësinë, peshën dhe drejtimin e shkronjave
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Cakto familjen e shkronjave në serif dhe kontrollo madhësinë, peshën dhe kryesimin
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Cakto familjen e shkronjave në sans-serif dhe kontrollo madhësinë, peshën dhe drejtimin
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Cakto familjen e shkronjave në monospace dhe kontrollo madhësinë, peshën dhe drejtimin

Sistemi i rrjetit

Përzierje Parametrat Përdorimi
.container-fixed() asnje Krijoni një enë me qendër horizontalisht për të mbajtur përmbajtjen tuaj
#grid > .core() @gridColumnWidth, @gridGutterWidth Gjeneroni një sistem rrjeti pikselësh (kontejner, rresht dhe kolona) me n kolona dhe x ulluqe me piksel të gjerë
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Gjeneroni një sistem rrjeti përqindjeje me n kolona dhe x % ulluqe të gjerë
#grid > .input() @gridColumnWidth, @gridGutterWidth Gjeneroni sistemin e rrjetit të pikselave për inputelementët, duke llogaritur mbushjen dhe kufijtë
.makeColumn @columns: 1, @offset: 0 Kthejeni ndonjë divnë një kolonë rrjeti pa .span*klasa

Karakteristikat e CSS3

Përzierje Parametrat Përdorimi
.border-radius() @radius Rrumbullakosni qoshet e një elementi. Mund të jetë një vlerë e vetme ose katër vlera të ndara me hapësirë
.box-shadow() @shadow Shtoni një hije në një element
.transition() @transition Shto efektin e tranzicionit CSS3 (p.sh., all .2s linear)
.rotate() @degrees Rrotulloni një element n gradë
.scale() @ratio Shkallësoni një element në n herë sa madhësia e tij origjinale
.translate() @x, @y Lëvizni një element në planin x dhe y
.background-clip() @clip Pritini sfondin e një elementi (i dobishëm për border-radius)
.background-size() @size Kontrolloni madhësinë e imazheve të sfondit përmes CSS3
.box-sizing() @boxmodel Ndryshoni modelin e kutisë për një element (p.sh. border-boxpër një gjerësi të plotë input)
.user-select() @select Kontrolloni zgjedhjen e kursorit të tekstit në një faqe
.backface-visibility() @visibility: visible Parandaloni dridhjen e përmbajtjes kur përdorni transformimet CSS 3D
.resizable() @direction: both Bëni çdo element të ridimensionueshëm në të djathtë dhe në fund
.content-columns() @columnCount, @columnGap: @gridGutterWidth Bëni që përmbajtja e çdo elementi të përdorë kolonat CSS3
.hyphens() @mode: auto Viza CSS3 kur të dëshironi (përfshin word-wrap: break-word)

Sfondet dhe gradientët

Përzierje Parametrat Përdorimi
#translucent > .background() @color: @white, @alpha: 1 Jepini një elementi një ngjyrë të tejdukshme sfondi
#translucent > .border() @color: @white, @alpha: 1 Jepini një elementi një ngjyrë të tejdukshme të kufirit
#gradient > .vertical() @startColor, @endColor Krijoni një gradient të sfondit vertikal ndër-shfletues
#gradient > .horizontal() @startColor, @endColor Krijoni një gradient të sfondit horizontal ndër-shfletues
#gradient > .directional() @startColor, @endColor, @deg Krijo një gradient të sfondit të drejtimit të tërthortë të shfletuesit
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Krijoni një gradient të sfondit me tre ngjyra të ndër-shfletuesit
#gradient > .radial() @innerColor, @outerColor Krijoni një gradient të sfondit radial ndër-shfletues
#gradient > .striped() @color, @angle Krijo një gradient të sfondit me vija ndër-shfletuesi
#gradientBar() @primaryColor, @secondaryColor Përdoret për butonat për të caktuar një kufi gradient dhe pak më të errët
Shënim: Nëse po paraqisni një kërkesë tërheqjeje në GitHub me CSS të modifikuar, duhet ta ripërpiloni CSS-në nëpërmjet cilësdo prej këtyre metodave.

Mjetet për përpilim

Nyja me makefil

Instaloni përpiluesin e linjës së komandës LESS, JSHint, Recess dhe uglify-js globalisht me npm duke ekzekutuar komandën e mëposhtme:

$ npm instalo -g më pak jshint recess uglify-js

Pasi të instalohet, thjesht drejtojeni makenga rrënja e direktorisë suaj të bootstrap dhe jeni gati.

Për më tepër, nëse keni të instaluar watchr , mund të kandidoni make watchqë bootstrap të rindërtohet automatikisht sa herë që redaktoni një skedar në bootstrap lib (kjo nuk kërkohet, thjesht një metodë e përshtatshme).

Linja e komandës

Instaloni mjetin e linjës së komandës LESS përmes Node dhe ekzekutoni komandën e mëposhtme:

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

Sigurohuni që të përfshini --compressnë atë komandë nëse po përpiqeni të ruani disa byte!

Javascript

Shkarkoni Less.js më të fundit dhe përfshini shtegun drejt tij (dhe Bootstrap) në <head>.

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

Për të rikompiluar skedarët .less, thjesht ruajini ato dhe ringarkoni faqen tuaj. Less.js i përpilon ato dhe i ruan në ruajtjen lokale.

Aplikacioni jozyrtar Mac

Aplikacioni jozyrtar Mac shikon drejtoritë e skedarëve .less dhe përpilon kodin në skedarët lokalë pas çdo ruajtjeje të një skedari .less të shikuar.

Nëse dëshironi, mund të ndryshoni preferencat në aplikacion për zvogëlimin automatik dhe në cilin drejtori përfundojnë skedarët e përpiluar.

Më shumë aplikacione Mac

Përtypje

Crunch është një redaktues dhe përpilues i mrekullueshëm LESS i ndërtuar në Adobe Air.

CodeKit

Krijuar nga i njëjti djalë si aplikacioni jozyrtar Mac, CodeKit është një aplikacion Mac që përpilon LESS, SASS, Stylus dhe CoffeeScript.

E thjeshte

Aplikacioni Mac, Linux dhe PC për kompilimin me tërheqje dhe lëshim të skedarëve LESS. Plus, kodi burimor është në GitHub .