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

MOTLATSI CSS

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.

  1. . karolo {
  2. . clearfix ();
  3. }

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.

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

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 sebelisamargin: auto
.ie7-inline-block() ha ho letho Sebelisa ho phaella ho tloaelehileng display: inline-blockho 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 inputlikarolo, accounting bakeng sa padding le meeli
.makeColumn @columns: 1, @offset: 0 Fetola leha e le efe divhore 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-boxbakeng 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.

Lisebelisoa tse ling tsa Mac

Kgutla

Crunch ke mohlophisi ea shebahalang hantle haholo LESS le moqapi o hahiloeng holim'a Adobe Air.

CodeKit

CodeKit e entsoe ke mohlankana ea tšoanang le app e seng ea semmuso ea Mac, ke sesebelisoa sa Mac se kopanyang LESS, SASS, Stylus, le CoffeeScript.

E bonolo

Mac, Linux, le app ea PC bakeng sa ho hula le ho theola lifaele tse LES. Ho feta moo, khoutu ea mohloli e ho GitHub .