Ku tirhisa LESS na Bootstrap

Endla leswaku Bootstrap yi va leyi u yi lavaka hi ku tirhisa LESS , ku nga CSS preprocessor, ku tirhisa swilo leswi cinca-cincaka, mixins, ni swin’wana leswi tirhisiwaka ku aka CSS ya Bootstrap.

Ha yini LESWI SWI ENDLIWEKE?

Bootstrap yi endliwe hi LESS eka xisekelo xa yona, ririmi ra xitayili lexi cinca-cincaka leri endliweke hi munghana wa hina lonene, Alexis Sellier . Swi endla leswaku ku tumbuluxa CSS leyi sekeriweke eka tisisiteme swi hatlisa, swi olova naswona swi tsakisa.

I yini lexi katsekaka?

Tanihi ku engeteriwa ka CSS, LESS yi katsa swilo leswi cinca-cincaka, mixins ya swiphemu swa khodi leswi tirhisiwaka nakambe, matirhelo ya tinhlayo to olova, ku endla swisaka, hambi ku ri mintirho ya mihlovo.

Dyondza swo tala

XITLHANYI XA CSS

Endzela webusayiti ya ximfumo eka http://lesscss.org/ ku dyondza swo tala.

Swilo leswi cinca-cincaka

Ku lawula mihlovo na mimpimo ya tipikseli eka CSS swi nga vavisa nyana, hi ntolovelo swi tele hi ku kopa na ku namarheta. A hi hi LESS hambiswiritano—avela mihlovo kumbe mimpimo ya tipikseli tanihi swilo leswi cinca-cincaka ivi u swi cinca kan’we.

Ti- mixins

Switiviso sweswo swinharhu swa border-radius leswi u faneleke ku swi endla eka ol' CSS ya ntolovelo? Sweswi va le hansi eka layini yin’we hi ku pfuniwa hi ti-mixin, swiphemu swa khodi leswi u nga swi tirhisaka nakambe kun’wana ni kun’wana.

Matirhelo ya ntirho

Endla gridi ya wena, ku rhangela, na ku olova swinene hi ku endla tinhlayo hi ku hatlisa na matirhelo. Andzisa, avanyisa, engetela, na ku susa ndlela ya wena eka CSS sanity.

Scaffolding na swihlanganisi

@bodyBackground @white Muhlovo wa le ndzhaku wa pheji
@textColor @grayDark Muhlovo wa tsalwa wa ntolovelo wa miri hinkwawo, tinhloko-mhaka ni swin’wana
@linkColor #08c Muhlovo wa tsalwa ra xihlanganisi xa ntolovelo
@linkColorHover darken(@linkColor, 15%) Muhlovo wa hover ya tsalwa ra xihlanganisi xa ntolovelo

Endlelo ra gridi

@gridColumns 12.
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6.382978723% hi ku olova.
@fluidGridGutterWidth 2.127659574% hi ku tirhisa .

Ku thayipa

@sansFontFamily "Helvetica Neue", Xihlala xa xirhendzevutani, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Murhumiwa Lowuntshwa", ndhawu yin'we
@baseFontSize 13px Swi fanele swi ri tipikseli
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Swi fanele swi ri tipikseli
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Matafula

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

Mihlovo ya greyscale

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

Mihlovo ya ti-accent

@blue #049cdb leyi nga kona
@green #46a546 hi ndlela leyi
@red #9d261d leyi nga kona
@yellow #ffc40d leyi nga kona
@orange #f89406 hi ndlela leyi
@pink #c3325f xitsonga
@purple #7a43b6

Swiphemu swa kona

Swikomba-nkarhi

@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

Swivumbeko

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

Vumba swiyimo na switsundzuxo

@warningText #c09853 hi ndlela leyi
@warningBackground #f3edd2
@errorText #b94a48 hi ndlela leyi
@errorBackground #f2dede
@successText #468847 hi ndlela leyi
@successBackground #dff0d8
@infoText #3a87xihlamusela-marito
@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

Swilo leswi nga ehansi

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

Yuniti ya nhenha

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Malunghana na ti mixins

Ti mixins ta xisekelo

Mixin ya xisekelo hi xiviri i ku katsa kumbe xiphemu xa xiphemu xa CSS. Ti tsariwile ku fana na tlilasi ya CSS naswona ti nga vitaniwa kun’wana na kun’wana.

  1. . xiaki xa { .
  2. . ku lulamisa erivaleni ();
  3. } .

Ti mixins ta parametric

Mixin ya parametric yi fana na mixin ya xisekelo, kambe yi tlhela yi amukela tipharamitha (hikwalaho ka vito) hi mimpimo ya xiviri yo hlawula.

  1. . xiaki xa { .
  2. . ndzilakano - radius ( 4px );
  3. } .

Hi ku olova engetela ya wena

Kwalomu ka mixin hinkwayo ya Bootstrap yi hlayisiwa eka mixins.less, fayili yo hlamarisa ya .less ya vukorhokeri leyi ku pfunaka ku tirhisa mixin eka yin’wana na yin’wana ya tifayela ta .less eka xitirhisiwa.

Kutani, yana emahlweni u tirhisa leti nga kona kutani u ntshunxeka ku engetela ta wena hilaha u lavaka hakona.

Ku katsa na ti mixins

Switirhisiwa

Mixin Tipharamitha Matirhiselo
.clearfix() hava Engetela eka mutswari wihi na wihi ku basisa swiphaphama endzeni
.tab-focus() hava Tirhisa xitayili xa ku kongomisa xa Webkit na xivumbeko xa xirhendzevutana xa Firefox
.center-block() hava Auto center a xiaki xa xiyimo xa xibokisana hi ku tirhisamargin: auto
.ie7-inline-block() hava Tirhisa ku engetela eka nkarhi na nkarhi display: inline-blockku kuma nseketelo wa IE7
.size() @height @width Hi ku hatlisa veka ku leha ni ku anama eka layini yin’we
.square() @size Yi aka ehenhla .size()ku veka ku anama na ku tlakuka tanihi ntikelo lowu fanaka
.opacity() @opacity Seta, hi tinomboro leti heleleke, tiphesente ta opacity (xikombiso, "50" kumbe "75") .

Swivumbeko

Mixin Tipharamitha Matirhiselo
.placeholder() @color: @placeholderText Seta placeholdermuvala wa tsalwa eka swingheniso

Ku thayipa

Mixin Tipharamitha Matirhiselo
#font > #family > .serif() hava Endla elemente yi tirhisa serif font stack
#font > #family > .sans-serif() hava Endla elemente yi tirhisa sans-serif font stack
#font > #family > .monospace() hava Endla elemente yi tirhisa xithaki xa fonto ya monospace
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Seta hi ku olova mpimo wa fonto, ntiko ni ku rhangela
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Seta ndyangu wa fonto eka serif, naswona lawula vukulu, ntiko, na ku rhangela
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Seta ndyangu wa tifonto eka sans-serif, naswona u lawula vukulu, ntiko, na ku rhangela
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Seta ndyangu wa fonto eka ndhawu yin’we, naswona u lawula mpimo, ntiko ni ku rhangela

Endlelo ra gridi

Mixin Tipharamitha Matirhiselo
.container-fixed() hava Endla xigwitsirisi lexi nga exikarhi hi ndlela yo olova xo khoma swilo swa wena
#grid > .core() @gridColumnWidth, @gridGutterWidth Endla sisiteme ya gridi ya tipikseli (xigwitsirisi, layini, na tikholomu) leyi nga na n wa tikholomu na x pixel wide gutter
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Endla sisiteme ya grid ya tiphesente leyingana n wa tikholomu na x % ya gutter yo anama
#grid > .input() @gridColumnWidth, @gridGutterWidth Endla sisiteme ya gridi ya tipikseli ya inputswiaki, ku hlayela ku padding na mindzilakano
.makeColumn @columns: 1, @offset: 0 Pfuxeta yin’wana na yin’wana divyi va kholomo ya gridi handle ka .span*titlilasi

Swihlawulekisi swa CSS3

Mixin Tipharamitha Matirhiselo
.border-radius() @radius Xirhendzevutani xa makhon’wa ya elemente. Ku nga va ntikelo wun’we kumbe mimpimo ya mune leyi hambanisiweke hi xivandla
.box-shadow() @shadow Engetela ndzhuti wa drop eka elemente
.transition() @transition Engetela mbuyelo wa ku cinca wa CSS3 (xikombiso, all .2s linear) .
.rotate() @degrees Jikisa elemente hi n degrees
.scale() @ratio Xikalo xa elemente ku ya eka n times ya vukulu bya yona byo sungula
.translate() @x, @y Susa elemente eka swiphemu swa x na y
.background-clip() @clip Tsema ndzhaku ka elemente (leswi pfunaka eka border-radius) .
.background-size() @size Lawula vukulu bya swifaniso swa le ndzhaku hi ku tirhisa CSS3
.box-sizing() @boxmodel Cinca modele wa bokisi ra elemente (xikombiso, border-boxeka full-width input) .
.user-select() @select Lawula ku hlawuriwa ka xikombiso xa tsalwa eka tluka
.backface-visibility() @visibility: visible Sivela ku tsindziyela ka swilo leswi nga endzeni loko u tirhisa ku hundzuka ka CSS 3D
.resizable() @direction: both Endla leswaku element yin’wana na yin’wana yi cinca sayizi ya yena exineneni nale hansi
.content-columns() @columnCount, @columnGap: @gridGutterWidth Endla leswaku nhundzu ya elemente yihi na yihi yi tirhisa tikholomu ta CSS3
.hyphens() @mode: auto CSS3 hyphenation loko u yi lava (ku katsa na word-wrap: break-word) .

Swivumbeko swa le ndzhaku ni swirhendzevutana

Mixin Tipharamitha Matirhiselo
#translucent > .background() @color: @white, @alpha: 1 Nyika elemente muvala wa le ndzhaku lowu vonakaka kahle
#translucent > .border() @color: @white, @alpha: 1 Nyika elemente muvala wa ndzilakano lowu vonakaka kahle
#gradient > .vertical() @startColor, @endColor Endla xirhendzevutani xa le ndzhaku lexi yimisiweke xa xihambano xa xihlamusela-marito
#gradient > .horizontal() @startColor, @endColor Endla xirhendzevutani xa le ndzhaku xa xihambano xa xihlamusela-marito
#gradient > .directional() @startColor, @endColor, @deg Endla xirhendzevutani xa le ndzhaku xa nkongomiso wa xihlamusela-marito xa xihambano
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Endla xirhendzevutana xa le ndzhaku xa mihlovo yinharhu xa xihambano xa xihlamusela-marito
#gradient > .radial() @innerColor, @outerColor Endla xirhendzevutana xa le ndzhaku xa radial xa cross-browser
#gradient > .striped() @color, @angle Endla xirhendzevutani xa le ndzhaku xa mitila ya xihambano xa xihlamusela-marito
#gradientBar() @primaryColor, @secondaryColor Yi tirhisiwa eka swikomba-nkarhi ku avela gradient na border ya ntima nyana
Xiya: Loko u rhumela xikombelo xo koka eka GitHub hi CSS leyi cinciweke, u fanele ku hlengeleta nakambe CSS hi ku tirhisa yin’wana na yin’wana ya tindlela leti.

Switirhisiwa swo hlengeleta

Node leyi nga na makefile

Nghenisa muhlengeleti wa layini ya swileriso ya LESS, JSHint, Recess, na uglify-js emisaveni hinkwayo hi npm hi ku tirhisa xileriso lexi landzelaka:

$ npm nghenisa -g ehansi jshint nkarhi wo wisa uglify-js

Loko se u nghenisiwile ntsena tsutsuma makeku suka eka rimitsu ra bootstrap directory ya wena naswona u vekiwile hinkwenu.

Ku engetela kwalaho, loko u ri na watchr leyi nghenisiweke, u nga ha tsutsuma make watchleswaku bootstrap yi akiwa nakambe hi ku tisungulela nkarhi wun’wana ni wun’wana loko u hlela fayili eka bootstrap lib (leswi a swi laveki, i ndlela yo olova ntsena).

Layini ya swileriso

Nghenisa xitirhisiwa xa layini ya swileriso xa LESS hi ku tirhisa Node ivi u tirhisa xileriso lexi landzelaka:

$ lessc ./less/xiphemu xa xirhendzevutani.less > xirhangiso xa xirhendzevutani.css

Tiyiseka leswaku u katsa --compresseka xileriso xexo loko u ringeta ku hlayisa tibayiti tin’wana!

Javascript

Download Less.js ya sweswinyana ivi u katsa ndlela yo ya eka yona (na Bootstrap) eka <head>.

<link rel = "xiphephana xa xitayili/le hansi" href = "/ndlela/ku ya eka/bootstrap.less" > <script src = "/ndlela/ku ya eka/le hansi.js" ></script>  
 

Ku tlhela u hlengeleta tifayela ta .less, ti hlayise ntsena ivi u tlhela u layicha tluka ra wena. Less.js yi ti hlengeleta no ti hlayisa eka vuhlayiselo bya laha kaya.

App ya Mac leyi nga riki ya ximfumo

App leyi nga riki ya ximfumo ya Mac yi hlalela tidayirekitara ta tifayela ta .less naswona yi hlengeleta khodi eka tifayela ta laha kaya endzhaku ka ku hlayisiwa kun’wana ni kun’wana ka fayili ya .less leyi hlaleriweke.

Loko u swi tsakela, u nga cinca-cinca leswi u swi tsakelaka eka app leswaku u ta hunguta hi ku tisungulela ni leswaku tifayela leti hlengeletiweke ti hetelelaka ti ri eka xikombo xihi.

Ti-app tin’wana ta Mac

Ku rhurhumela

Crunch i muhleri ​​na muhlengeleti wa LESS loyi a langutekaka kahle swinene loyi a akiweke eka Adobe Air.

Xitirhisiwa xa Khodi

Yi endliwe hi jaha leri fanaka na app ya Mac leyi nga riki ya ximfumo, CodeKit i app ya Mac leyi hlengeletaka LESS, SASS, Stylus, na CoffeeScript.

Swi nga olovi

Mac, Linux, na PC app ya ku koka na ku hoxa ku hlengeleta tifayela ta LESS. Ku engetela kwalaho, khodi ya xihlovo yi le ka GitHub .