Ho sebelisa LESS ka Bootstrap

Iketsetse le ho holisa Bootstrap ka LESS , preprocessor ea CSS, ho nka monyetla ka mefuta e fapaneng, metsoako, le tse ling tse sebelisoang ho aha CSS ea Bootstrap.

Ke Hobane'ng ha HO LE TLASE?

Bootstrap e entsoe ka LESS motheong oa eona, puo e matla ea li-stylesheet e entsoeng ke motsoalle oa rona oa hlooho ea khomo, Alexis Sellier . E etsa hore ho nts'etsapele CSS e thehiloeng ho sistimi kapele, ho be bonolo, hape ho be monate.

Ho kenyelelitsoe eng?

E le katoloso ea CSS, LESS e kenyelletsa mefuta e fapaneng, li-mixins bakeng sa likaroloana tse ka sebelisoang hape tsa khoutu, ts'ebetso ea lipalo tse bonolo, ho etsa sehlaha, esita le mesebetsi ea mebala.

Ithute haholoanyane

Etela webosaete ea semmuso ho http://lesscss.org/ ho ithuta haholoanyane.

Mefuta e fapaneng

Ho laola mebala le litekanyetso tsa pixel ho CSS e ka ba bohloko bo itseng, hangata bo tletse kopi le peista. Eseng ka LESS leha ho le joalo - fana ka mebala kapa boleng ba pixel joalo ka mefuta e fapaneng 'me u e fetole hang.

Metsoako

Liphatlalatso tseo tse tharo tsa moeli-radius tseo u hlokang ho li etsa ka CSS ea kamehla? Hona joale ba theohile moleng o le mong ka thuso ea li-mixins, li-snippets tsa khoutu tseo u ka li sebelisang hape kae kapa kae.

Ts'ebetso

Etsa hore grid ea hau, e etelle pele, 'me e be bonolo haholoanyane ka ho etsa lipalo ha u fofa ka ts'ebetso. Ikatisetsa, arola, eketsa, 'me u tlose tsela ea hau ho CSS sanity.

Scaffolding le lihokelo

`@bodyBackground`	`@white`	'Mala oa bokamorao ba leqephe
`@textColor`	`@grayDark`	Mmala oa kamehla oa mongolo bakeng sa 'mele kaofela, lihlooho, le tse ling
`@linkColor`	`#08c`	'Mala oa mongolo oa kamehla
`@linkColorHover`	`darken(@linkColor, 15%)`	Mmala oa kamehla oa sehokelo sa mongolo

Sistimi ea grid

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

Tlhaloso ea litlhaku

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier New", monospace
`@baseFontSize`	13px	E tlameha ho ba pixels
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	E tlameha ho ba pixels
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Litafole

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

Mebala e bohlooho

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

Mebala ea molumo

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

Likaroloana

Likonopo

`@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`

Mefuta

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

Maemo a foromo le litlhokomeliso

`@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`

Litheohelang

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

Sehlopha sa mohale

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

Mabapi le metsoako

Metsoako ea mantlha

Motsoako oa mantlha ha e le hantle ke kenyelletso kapa karolo e itseng bakeng sa snippet ea CSS. Li ngotsoe joalo ka sehlopha sa CSS 'me li ka bitsoa kae kapa kae.

. karolo {
  . clearfix ();
}

Metsoako ea Parametric

Motsoako oa parametric o tšoana le motsoako oa mantlha, empa o boetse o amohela liparamente (ka hona lebitso) ka boleng ba boikhethelo.

. karolo {
  . moeli - radius ( 4px );
}

Kenya ea hau habonolo

Hoo e ka bang metsoako eohle ea Bootstrap e bolokiloe ka li-mixins.less, e babatsehang utility .less faele e nolofalletsang hore u sebelise motsoako ho efe kapa efe ea .less difaele ka har'a toolkit.

Kahoo, tsoela pele 'me u sebelise tse seng li ntse li le teng kapa u ikutloe u lokolohile ho eketsa tsa hau kamoo u hlokang kateng.

E kenyelelitsoe metsoako

Lisebelisoa

Kopanya	Mekhahlelo	Tšebeliso
`.clearfix()`	ha ho letho	Eketsa ho motsoali ofe kapa ofe ho hlakola liphaphatha ka hare
`.tab-focus()`	ha ho letho	Sebelisa mokhoa oa ho tsepamisa maikutlo ho Webkit le kemiso ea Firefox e potolohileng
`.center-block()`	ha ho letho	Auto center a block-level element u sebelisa`margin: auto`
`.ie7-inline-block()`	ha ho letho	Sebelisa ho phaella ho tloaelehileng `display: inline-block`ho fumana tšehetso ea IE7
`.size()`	`@height @width`	Ka potlako beha bolelele le bophara moleng o le mong
`.square()`	`@size`	E haha `.size()`ho beha bophara le bophahamo e le boleng bo tšoanang
`.opacity()`	`@opacity`	Beha, ka lipalo tse felletseng, peresente ea opacity (mohlala, "50" kapa "75")

Mefuta

Kopanya	Mekhahlelo	Tšebeliso
`.placeholder()`	`@color: @placeholderText`	Seta `placeholder`'mala oa mongolo bakeng sa lintho tse kenang

Tlhaloso ea litlhaku

Kopanya	Mekhahlelo	Tšebeliso
`#font > #family > .serif()`	ha ho letho	Etsa element ho sebelisa serif fonte stack
`#font > #family > .sans-serif()`	ha ho letho	Etsa ntho e itseng u sebelise stack ea fonte ea sans-serif
`#font > #family > .monospace()`	ha ho letho	Etsa ntho e itseng u sebelise stack ea mongolo oa monospace
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Seta boholo ba fonte ha bonolo, boima ba 'mele le moetapele
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Beha lelapa la fonte ho serif, 'me u laole boholo, boima le moetapele
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Beha lelapa la fonte ho sans-serif, 'me u laole boholo, boima le moetapele
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Beha lelapa la fonte ho monospace, 'me u laole boholo, boima le moetapele

Sistimi ea grid

Kopanya	Mekhahlelo	Tšebeliso
`.container-fixed()`	ha ho letho	Theha sets'oants'o se otlolohileng ho boloka litaba tsa hau
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Hlahisa sistimi ea grid ea pixel (setshelo, mola, le litšiea) tse nang le likholomo le x
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Hlahisa tsamaiso ea marang-rang ea peresente e nang le litšiea tsa n le x % gutter e pharaletseng
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Hlahisa sistimi ea grid ea pixel bakeng sa `input`likarolo, accounting bakeng sa padding le meeli
`.makeColumn`	`@columns: 1, @offset: 0`	Fetola leha e le efe `div`hore e be kholomo ea grid ntle le `.span*`lihlopha

Lintho tsa CSS3

Kopanya	Mekhahlelo	Tšebeliso
`.border-radius()`	`@radius`	Ho potoloha likhutlo tsa element. E ka ba boleng bo le bong kapa litekanyetso tse 'nè tse arohaneng tsa sebaka
`.box-shadow()`	`@shadow`	Kenya moriti oa marotholi ho element
`.transition()`	`@transition`	Kenya phello ea phetoho ea CSS3 (mohlala, `all .2s linear`)
`.rotate()`	`@degrees`	Fetola element n degrees
`.scale()`	`@ratio`	Eketsa element ho n ka boholo ba eona ba pele
`.translate()`	`@x, @y`	Tsamaisa element ho lifofane tsa x le y
`.background-clip()`	`@clip`	Fokotsa bokamorao ba elemente (e molemo bakeng sa `border-radius`)
`.background-size()`	`@size`	Laola boholo ba litšoantšo tse ka morao ka CSS3
`.box-sizing()`	`@boxmodel`	Fetola mohlala oa lebokose bakeng sa element (mohlala, `border-box`bakeng sa bophara bo felletseng `input`)
`.user-select()`	`@select`	Laola khetho ea khesara ea mongolo leqepheng
`.backface-visibility()`	`@visibility: visible`	Thibela ho thekesela ha dikahare ha o sebedisa diphetoho tsa CSS 3D
`.resizable()`	`@direction: both`	Etsa hore element efe kapa efe e be matla ka ho le letona le tlase
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Etsa hore litaba tsa elemente efe kapa efe li sebelise likholomo tsa CSS3
`.hyphens()`	`@mode: auto`	CSS3 hyphenation ha u e batla (e kenyelletsa `word-wrap: break-word`)

Backgrounds le gradients

Kopanya	Mekhahlelo	Tšebeliso
`#translucent > .background()`	`@color: @white, @alpha: 1`	Fana ka elemente bokamorao ba 'mala o benyang
`#translucent > .border()`	`@color: @white, @alpha: 1`	Fana ka elemente 'mala oa moeli o fetelletseng
`#gradient > .vertical()`	`@startColor, @endColor`	Theha sebopeho sa bokamorao ba sebatli se otlolohileng
`#gradient > .horizontal()`	`@startColor, @endColor`	Etsa sebopeho sa sebatli se tšekaletseng se ka morao
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Theha sebopeho sa bokamorao ba sebatli
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Theha sebatli se nang le mebala e meraro sa bokamorao ba gradient
`#gradient > .radial()`	`@innerColor, @outerColor`	Etsa "cross-browser radial" gradient
`#gradient > .striped()`	`@color, @angle`	Theha sebopeho sa bokamorao ba sebatli se nang le methalo e fapaneng
`#gradientBar()`	`@primaryColor, @secondaryColor`	E sebelisoa bakeng sa likonopo ho abela gradient le moeli o lefifi hanyane

Tlhokomeliso: Haeba u fana ka kopo ea ho hula ho GitHub ka CSS e fetotsoeng, u tlameha ho khutlisa CSS ka e 'ngoe ea mekhoa ena.

Lisebelisoa tsa ho bokella

Node e nang le makefile

Kenya khokahanyo ea taelo ea LESS, JSHnt, Recess, le uglip-js lefatšeng ka bophara ka npm ka ho sebelisa taelo e latelang:

$ npm kenya -g tlase jshint recess ugify-js

Hang ha e kenyelitsoe feela matha makeho tloha motso oa bukana ea hau ea bootstrap 'me u se u hlophisitsoe.

Ho phaella moo, haeba u kentse watchr , u ka 'na ua matha make watchho etsa hore bootstrap e tsosolosoe nako le nako ha u hlophisa faele ho bootstrap lib (sena ha se hlokehe, mokhoa o bonolo feela).

Mola oa taelo

Kenya sesebelisoa sa mola oa taelo ea LESS ka Node 'me u tsamaise taelo e latelang:

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

Etsa bonnete ba hore o kenyelletsa --compresstaelong eo haeba o leka ho boloka li-byte tse ling!

Javascript

Khoasolla tsa morao-rao Les.js 'me u kenyelle tsela e eang ho eona (le Bootstrap) ho <head>.

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

Ho bokella lifaele tsa .less, li boloke feela 'me u kenye leqephe la hau bocha. Less.js ea li bokella le ho li boloka polokelong ea lehae.

Sesebelisoa sa Mac se seng molaong

Sesebelisoa se seng sa semmuso sa Mac se shebella li-directory tsa lifaele tse .less mme se bokella khoutu ho lifaele tsa lehae kamora ho boloka nako le nako ha faele e shebeliloeng .less.

Haeba u rata, u ka fetola likhetho ho app bakeng sa miniifying ea othomathiki le hore na lifaele tse hlophisitsoeng li qetella li le ho eng.

E hahiloe ka TLHOKOMELO

Ke Hobane'ng ha HO LE TLASE?

Ho kenyelelitsoe eng?

Ithute haholoanyane

Mefuta e fapaneng

Metsoako

Ts'ebetso

Bootstrap e feto-fetoha LESS mefuta e fapaneng, boleng ba bona, le tataiso ea tšebeliso

Scaffolding le lihokelo

Sistimi ea grid

Tlhaloso ea litlhaku

Litafole

Mebala e bohlooho

Mebala ea molumo

Likaroloana

Likonopo

Mefuta

Maemo a foromo le litlhokomeliso

Navbar

Litheohelang

Sehlopha sa mohale

Metsoako ea Bootstrap

Mabapi le metsoako

Metsoako ea mantlha

Metsoako ea Parametric

Kenya ea hau habonolo

E kenyelelitsoe metsoako

Lisebelisoa

Mefuta

Tlhaloso ea litlhaku

Sistimi ea grid

Lintho tsa CSS3

Backgrounds le gradients

Ho kopanya Bootstrap le LESS

Lisebelisoa tsa ho bokella

Node e nang le makefile

Mola oa taelo

Javascript

Sesebelisoa sa Mac se seng molaong

Lisebelisoa tse ling tsa Mac

Kgutla

CodeKit

E bonolo