Siv LESS nrog Bootstrap

Customize thiab txuas ntxiv Bootstrap nrog LESS , CSS preprocessor, coj kom zoo dua ntawm qhov sib txawv, mixins, thiab ntau dua siv los tsim Bootstrap's CSS.

Vim li cas LESS?

Bootstrap yog tsim nrog LESS ntawm nws cov tub ntxhais, ib hom lus dynamic stylesheet tsim los ntawm peb tus phooj ywg zoo, Alexis Sellier . Nws ua rau kev tsim cov txheej txheem raws li CSS sai dua, yooj yim dua, thiab lom zem dua.

Dab tsi suav nrog?

Raws li kev txuas ntxiv ntawm CSS, LESS suav nrog cov hloov pauv, cov khoom sib xyaw rau cov khoom siv rov qab siv tau ntawm cov lej, kev ua haujlwm rau lej yooj yim, zes, thiab txawm tias xim ua haujlwm.

Kawm ntxiv

LESS CSS

Mus saib lub vev xaib official ntawm http://lesscss.org/ kom paub ntau ntxiv.

Hloov pauv

Kev tswj cov xim thiab pixel qhov tseem ceeb hauv CSS tuaj yeem ua rau mob me ntsis, feem ntau yog tag nrho cov ntawv luam thiab muab tshuaj. Tsis nrog LESS txawm tias - muab cov xim lossis pixel qhov tseem ceeb raws li qhov sib txawv thiab hloov lawv ib zaug.

Mixins

Peb cov lus tshaj tawm ciam teb-dawb koj yuav tsum tau ua hauv ol' CSS li niaj zaus? Tam sim no lawv nyob rau hauv ib kab nrog kev pab los ntawm mixins, snippets ntawm code koj tuaj yeem rov qab siv txhua qhov chaw.

Kev ua haujlwm

Ua koj daim phiaj, ua, thiab hloov pauv tau yooj yim dua los ntawm kev ua lej ntawm ya nrog kev ua haujlwm. Sib faib, faib, ntxiv, thiab rho koj txoj hauv kev rau CSS kev huv.

Scaffolding thiab txuas

@bodyBackground @white Nplooj tom qab xim
@textColor @grayDark Xim ntawv xim rau tag nrho lub cev, kab lus, thiab lwm yam
@linkColor #08c Default link text color
@linkColorHover darken(@linkColor, 15%) Default link text hover color

Daim phiaj system

@gridColumns 12
@gridColumnWidth 60 px
@gridGutterWidth 20px ib
@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 ib Yuav tsum yog pixels
@baseFontFamily @sansFontFamily
@baseLineHeight 18 px Yuav tsum yog pixels
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Rooj

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

Greyscale xim

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

Accent xim

@blue #049 wb
@green #46a546
@red 9d261 ib
@yellow #fc40d
@orange f89406 ua
@pink #c3325f
@purple #7a43b 6

Cheebtsam

Khawm

@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

Cov ntawv

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

Tsim cov xeev thiab ceeb toom

@warningText #c09853
@warningBackground #f3edd 2
@errorText #b94a48
@errorBackground #f2 ua
@successText #468847
@successBackground #df0d8
@infoText #3a87 ua
@infoBackground #d9ef7

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

Hero unit

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Hais txog mixins

Basic mixins

Ib qho kev sib xyaw ua ke yog qhov tseem ceeb suav nrog lossis ib feem rau cov ntu ntawm CSS. Lawv tau sau ib yam li CSS chav kawm thiab tuaj yeem hu tau txhua qhov chaw.

  1. . lub ntsiab {
  2. . clearfix ();
  3. }

Parametric mixins

Ib qho parametric mixin zoo ib yam li cov mixin yooj yim, tab sis nws kuj lees txais cov kev txwv (li no lub npe) nrog rau qhov kev xaiv qhov tseem ceeb.

  1. . lub ntsiab {
  2. . ciam teb - vojvoog ( 4px );
  3. }

Yooj yim ntxiv koj tus kheej

Yuav luag tag nrho cov Bootstrap cov mixins khaws cia hauv mixins.less, ib qho khoom siv zoo heev .less cov ntaub ntawv uas ua rau koj siv cov mixin hauv ib qho ntawm cov ntaub ntawv .less hauv cov khoom siv.

Yog li, mus tom ntej thiab siv cov uas twb muaj lawm lossis xav tias dawb ntxiv koj tus kheej raws li koj xav tau.

Muaj cov mixins

Cov khoom siv

Mixin Tsis muaj Kev siv
.clearfix() tsis muaj Ntxiv rau txhua tus niam txiv kom tshem cov ntab hauv
.tab-focus() tsis muaj Siv lub Webkit tsom style thiab puag ncig Firefox qauv
.center-block() tsis muaj Nws pib nruab ib lub block-theem keeb sivmargin: auto
.ie7-inline-block() tsis muaj Siv ntxiv rau qhov tsis tu ncua display: inline-blockkom tau txais kev txhawb nqa IE7
.size() @height @width Ceev ceev qhov siab thiab dav ntawm ib kab
.square() @size Tsim .size()kom muaj qhov dav thiab qhov siab raws li tus nqi tib yam
.opacity() @opacity Teem, nyob rau hauv tag nrho cov zauv, qhov opacity feem pua ​​(piv txwv li, "50" los yog "75")

Cov ntawv

Mixin Tsis muaj Kev siv
.placeholder() @color: @placeholderText Teem cov placeholderntawv xim rau kev nkag

Typography

Mixin Tsis muaj Kev siv
#font > #family > .serif() tsis muaj Ua ib qho khoom siv serif font pawg
#font > #family > .sans-serif() tsis muaj Ua ib qho khoom siv sans-serif font pawg
#font > #family > .monospace() tsis muaj Ua ib lub caij siv ib pawg monospace font
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Yooj yim teeb font loj, hnyav, thiab ua
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Teeb tsa tsev neeg font rau serif, thiab tswj qhov loj me, qhov hnyav, thiab ua
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Teeb tsa tsev neeg font rau sans-serif, thiab tswj qhov loj me, qhov hnyav, thiab ua
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Teeb tsa tsev neeg font rau monospace, thiab tswj qhov loj me, qhov hnyav, thiab ua

Daim phiaj system

Mixin Tsis muaj Kev siv
.container-fixed() tsis muaj Tsim ib lub thawv kab rov tav los tuav koj cov ntsiab lus
#grid > .core() @gridColumnWidth, @gridGutterWidth Tsim ib lub pixel grid system (khoom, kab, thiab kab) nrog n kab thiab x pixel wide gutter
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Tsim kom muaj ib feem pua ​​​​grid system nrog n kab thiab x % dav gutter
#grid > .input() @gridColumnWidth, @gridGutterWidth Tsim cov pixel grid system rau inputcov ntsiab lus, accounting rau padding thiab ciam teb
.makeColumn @columns: 1, @offset: 0 Tig ib qho divrau hauv kab kab ke tsis muaj cov .span*chav kawm

CSS3 Properties

Mixin Tsis muaj Kev siv
.border-radius() @radius Round lub ces kaum ntawm ib lub ntsiab. Yuav ua tau ib tus nqi lossis plaub qhov chaw sib cais
.box-shadow() @shadow Ntxiv ib qho duab ntxoov ntxoo rau ib lub caij
.transition() @transition Ntxiv CSS3 kev hloov pauv cov nyhuv (piv txwv li, all .2s linear)
.rotate() @degrees Tig ib lub ntsiab n degrees
.scale() @ratio Scale ib lub caij rau n npaug nws qhov loj me
.translate() @x, @y Txav ib lub ntsiab ntawm x thiab y dav hlau
.background-clip() @clip Crop lub keeb kwm yav dhau ntawm lub caij (pab tau rau border-radius)
.background-size() @size Tswj qhov loj ntawm cov duab tom qab ntawm CSS3
.box-sizing() @boxmodel Hloov lub thawv qauv rau ib qho khoom (piv txwv li, border-boxrau qhov dav dav input)
.user-select() @select Tswj tus cursor xaiv cov ntawv ntawm ib nplooj ntawv
.backface-visibility() @visibility: visible Tiv thaiv flickering ntawm cov ntsiab lus thaum siv CSS 3D hloov
.resizable() @direction: both Ua kom txhua lub ntsiab lus tuaj yeem hloov tau ntawm sab xis thiab hauv qab
.content-columns() @columnCount, @columnGap: @gridGutterWidth Ua cov ntsiab lus ntawm txhua lub caij siv CSS3 kab
.hyphens() @mode: auto CSS3 hyphenation thaum koj xav tau nws (suav nrog word-wrap: break-word)

Background thiab gradients

Mixin Tsis muaj Kev siv
#translucent > .background() @color: @white, @alpha: 1 Muab cov khoom ib qho xim tom qab translucent
#translucent > .border() @color: @white, @alpha: 1 Muab cov khoom ib qho xim ciam teb translucent
#gradient > .vertical() @startColor, @endColor Tsim ib tug cross-browser ntsug tom qab gradient
#gradient > .horizontal() @startColor, @endColor Tsim ib tug cross-browser kab rov tav tom qab gradient
#gradient > .directional() @startColor, @endColor, @deg Tsim ib tug cross-browser directional keeb kwm yav dhau gradient
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Tsim ib tug cross-browser peb-xim tom qab gradient
#gradient > .radial() @innerColor, @outerColor Tsim ib tug cross-browser radial keeb kwm yav dhau gradient
#gradient > .striped() @color, @angle Tsim ib tug cross-browser striped keeb kwm yav dhau gradient
#gradientBar() @primaryColor, @secondaryColor Siv rau cov nyees khawm los muab gradient thiab ciam teb tsaus me ntsis
Nco tseg: Yog tias koj tab tom xa daim ntawv thov rub mus rau GitHub nrog hloov kho CSS, koj yuav tsum rov ua dua CSS ntawm ib qho ntawm cov txheej txheem no.

Cov cuab yeej rau kev sau

Node nrog makefile

Nruab LESS command line compiler, JSHint, Recess, thiab uglify-js thoob ntiaj teb nrog npm los ntawm kev khiav cov lus txib hauv qab no:

$ npm nruab -g tsawg jshint recess uglify-js

Ib zaug ntsia cia li khiav makelos ntawm lub hauv paus ntawm koj bootstrap directory thiab koj nyob nraum tag nrho.

Tsis tas li ntawd, yog tias koj muaj watchr ntsia, koj tuaj yeem khiav make watchkom muaj bootstrap rov tsim dua txhua zaus koj hloov cov ntaub ntawv hauv bootstrap lib (qhov no tsis tas yuav tsum tau, tsuas yog txoj kev yooj yim xwb).

kab hais kom ua

Nruab qhov LESS command line tool ntawm Node thiab khiav cov lus txib hauv qab no:

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

Nco ntsoov suav nrog --compresshauv cov lus txib yog tias koj tab tom sim txuag qee cov bytes!

Javascript

Download tau qhov tseeb Less.js thiab suav nrog txoj hauv kev rau nws (thiab Bootstrap) hauv <head>.

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

Txhawm rau rov ua dua cov ntaub ntawv .less, tsuas yog txuag lawv thiab rov rub koj nplooj ntawv. Less.js suav nrog lawv thiab khaws cia rau hauv qhov chaw cia.

Unofficial Mac app

Lub Mac app tsis raug cai saib cov npe ntawm .less cov ntaub ntawv thiab sau cov cai rau cov ntaub ntawv hauv zos tom qab txhua qhov khaws cia ntawm cov ntaub ntawv .less.

Yog tias koj nyiam, koj tuaj yeem hloov qhov kev nyiam hauv app rau kev rho tawm tsis siv neeg thiab cov npe twg cov ntaub ntawv sau ua ke xaus rau hauv.

Ntau Mac apps

Crunch

Crunch yog qhov zoo saib LESS editor thiab compiler ua rau Adobe Air.

CodeKit

Tsim los ntawm tib tus txiv leej tub uas tsis yog Mac app, CodeKit yog Mac app uas suav nrog LESS, SASS, Stylus, thiab CoffeeScript.

Yooj yim

Mac, Linux, thiab PC app rau luag thiab tso ua ke ntawm LESS cov ntaub ntawv. Ntxiv rau, lub hauv paus code yog nyob ntawm GitHub .