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

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 tawm koj txoj hauv kev rau CSS sanity.

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`

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.

. lub ntsiab {
  . clearfix ();
}

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.

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

Yooj yim ntxiv koj tus kheej

Yuav luag tag nrho cov Bootstrap cov mixins khaws cia rau 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 tawm ntab hauv
`.tab-focus()`	tsis muaj	Siv lub Webkit tsom style thiab puag ncig Firefox qauv
`.center-block()`	tsis muaj	Nws pib nruab ib qhov thaiv-theem siv`margin: auto`
`.ie7-inline-block()`	tsis muaj	Siv ntxiv rau qhov tsis tu ncua `display: inline-block`kom 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 `placeholder`ntawv 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 ib daim phiaj ua ntej nrog n kab thiab x % dav gutter
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Tsim cov pixel grid system rau `input`cov ntsiab lus, suav nrog padding thiab ciam teb
`.makeColumn`	`@columns: 1, @offset: 0`	Tig ib qho `div`rau hauv kab kab ke tsis muaj cov `.span*`chav kawm

CSS3 Properties

Mixin	Tsis muaj	Kev siv
`.border-radius()`	`@radius`	Hloov cov 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 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-box`rau 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

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 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 qhov LESS hais kom ua kab compiler thiab uglify-js thoob ntiaj teb nrog npm los ntawm kev khiav cov lus txib hauv qab no:

$ npm nruab -g tsawg 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.

Ua nrog LESS

Vim li cas LESS?

Dab tsi suav nrog?

Kawm ntxiv

Hloov pauv

Mixins

Kev ua haujlwm

Bootstrap variables LESS variables, lawv cov txiaj ntsig, thiab cov lus qhia siv

Scaffolding thiab txuas

Daim phiaj system

Typography

Rooj

Greyscale xim

Accent xim

Cheebtsam

Khawm

Cov ntawv

Tsim cov xeev thiab ceeb toom

Navbar

Dropdowns

Hero unit

Bootstrap mixins

Hais txog mixins

Basic mixins

Parametric mixins

Yooj yim ntxiv koj tus kheej

Muaj cov mixins

Cov khoom siv

Cov ntawv

Typography

Daim phiaj system

CSS3 Properties

Background thiab gradients

Sau Bootstrap nrog LESS

Cov cuab yeej rau kev sau

Node nrog makefile

kab hais kom ua

Javascript

Unofficial Mac app

Ntau Mac apps

Crunch

CodeKit

Yooj yim