Koresha LESS hamwe na Bootstrap

Hindura kandi wongere Bootstrap hamwe na LESS , progaramu ya CSS, kugirango ukoreshe impinduka, ivanga, nibindi byakoreshejwe mukubaka CSS ya Bootstrap.

Kuki KUBESHYA?

Bootstrap ikozwe na LESS kumurongo wacyo, imvugo yimiterere yimiterere yakozwe ninshuti yacu nziza, Alexis Sellier . Bituma iterambere rya sisitemu ishingiye kuri CSS byihuse, byoroshye, kandi birashimishije.

Harimo iki?

Nukwagura CSS, LESS ikubiyemo impinduka, ivanga kubice byongeye gukoreshwa bya code, ibikorwa kubiharuro byoroheje, ibyari, ndetse nibikorwa byamabara.

Wige byinshi

CSS

Sura urubuga rwemewe kuri http://lesscss.org/ kugirango umenye byinshi.

Ibihinduka

Gucunga amabara na pigiseli indangagaciro muri CSS birashobora kuba akababaro gato, mubisanzwe byuzuye kopi na paste. Ntabwo hamwe na LESS nubwo - shyira amabara cyangwa pigiseli indangagaciro nkibihinduka hanyuma uhindure rimwe.

Imvange

Ayo matangazo atatu yumupaka-radiyo ukeneye gukora mubisanzwe ol 'CSS? Noneho baramanutse kumurongo umwe ubifashijwemo na mixin, uduce twa code ushobora gukoresha ahantu hose.

Ibikorwa

Kora gride yawe, iyoboye, kandi birenze guhinduka mugukora imibare kuguruka hamwe nibikorwa. Kugwiza, kugabana, kongeraho, no gukuramo inzira yawe kuri CSS.

Guhuza no guhuza

@bodyBackground @white Urupapuro rwinyuma
@textColor @grayDark Ibisanzwe byanditseho ibara kumubiri wose, imitwe, nibindi byinshi
@linkColor #08c Mburabuzi Ihuza inyandiko Ibara
@linkColorHover darken(@linkColor, 15%) Mburabuzi Ihuza inyandiko ihindura ibara

Sisitemu ya sisitemu

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

Imyandikire

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Courier Nshya", monospace
@baseFontSize 13px Ugomba kuba pigiseli
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Ugomba kuba pigiseli
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Imbonerahamwe

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

Ibara ryijimye

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

Amabara meza

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

Ibigize

Utubuto

@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

Ifishi

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

Shiraho leta no kumenyesha

@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

Ibitonyanga

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

Igice cyintwari

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Ibyerekeye kuvanga

Uruvange rwibanze

Ivanga shingiro mubyukuri harimo gushiramo cyangwa igice kubice bya CSS. Byanditswe nkicyiciro cya CSS kandi birashobora guhamagarwa ahantu hose.

  1. . element {
  2. . ibisobanuro ();
  3. }

Imvange ya Parametric

Ivangavanga risanzwe ni nkivanga shingiro, ariko kandi ryemera ibipimo (niyo mpamvu izina) hamwe nibisanzwe bitemewe.

  1. . element {
  2. . umupaka - radiyo ( 4px );
  3. }

Ongera byoroshye

Hafi ya mixin zose za Bootstrap zibitswe muri mixins.less, akamaro keza cyane .nta fayili igushoboza gukoresha mixin muri buri fayili. Idafite dosiye mubitabo.

Noneho, jya imbere ukoreshe ibihari cyangwa wumve ko wongeyeho ibyawe nkuko ubikeneye.

Harimo kuvanga

Ibikorwa

Kuvanga Ibipimo Ikoreshwa
.clearfix() nta na kimwe Ongeraho kubabyeyi bose kugirango bakureho ibireremba imbere
.tab-focus() nta na kimwe Koresha uburyo bwibanze bwa Webkit hamwe nuruziga rwa Firefox
.center-block() nta na kimwe Imodoka hagati yo guhagarika urwego urwego ukoreshejemargin: auto
.ie7-inline-block() nta na kimwe Koresha wongeyeho display: inline-blockmubisanzwe kugirango ubone inkunga ya IE7
.size() @height @width Shiraho vuba uburebure n'ubugari kumurongo umwe
.square() @size Yubaka .size()kugirango ashyireho ubugari n'uburebure agaciro kamwe
.opacity() @opacity Shiraho, mumibare yose, ijanisha rya opacite (urugero, "50" cyangwa "75")

Ifishi

Kuvanga Ibipimo Ikoreshwa
.placeholder() @color: @placeholderText Shiraho placeholderibara ryibara ryinjiza

Imyandikire

Kuvanga Ibipimo Ikoreshwa
#font > #family > .serif() nta na kimwe Kora ikintu koresha serif yimyandikire
#font > #family > .sans-serif() nta na kimwe Kora ikintu koresha sans-serif yimyandikire
#font > #family > .monospace() nta na kimwe Kora ikintu koresha imyandikire ya monospace
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Byoroshye gushiraho ingano yimyandikire, uburemere, no kuyobora
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Shiraho umuryango wimyandikire kuri serif, no kugenzura ingano, uburemere, no kuyobora
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Shiraho umuryango wimyandikire kuri sans-serif, no kugenzura ingano, uburemere, no kuyobora
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Shiraho umuryango wimyandikire kuri monospace, kandi ugenzure ingano, uburemere, no kuyobora

Sisitemu ya sisitemu

Kuvanga Ibipimo Ikoreshwa
.container-fixed() nta na kimwe Kora ikintu gitambitse giteganijwe kugirango ufate ibikubiyemo
#grid > .core() @gridColumnWidth, @gridGutterWidth Gukora pigiseli ya sisitemu (kontineri, umurongo, ninkingi) hamwe n inkingi na x pigiseli yagutse
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Gukora ijanisha rya sisitemu hamwe ninkingi na x % ubugari
#grid > .input() @gridColumnWidth, @gridGutterWidth Gukora pigiseli ya grid sisitemu kubintu input, kubara padi nimbibi
.makeColumn @columns: 1, @offset: 0 Hindura icyaricyo cyose divmuri gride inkingi idafite .span*amasomo

Imiterere ya CSS3

Kuvanga Ibipimo Ikoreshwa
.border-radius() @radius Kuzenguruka inguni z'ikintu. Irashobora kuba agaciro kamwe cyangwa bane umwanya utandukanijwe nagaciro
.box-shadow() @shadow Ongeraho igicucu gitonyanga kubintu
.transition() @transition Ongeramo CSS3 ingaruka yinzibacyuho (eg, all .2s linear)
.rotate() @degrees Kuzenguruka ikintu n dogere
.scale() @ratio Gupima ikintu kugeza n inshuro ubunini bwacyo
.translate() @x, @y Himura ikintu ku ndege ya x na y
.background-clip() @clip Kata inyuma yibintu (bifite akamaro kuri border-radius)
.background-size() @size Igenzura ingano yamashusho yinyuma ukoresheje CSS3
.box-sizing() @boxmodel Hindura agasanduku k'icyitegererezo kubintu (urugero, border-boxkubugari bwuzuye input)
.user-select() @select Kugenzura indanga guhitamo inyandiko kurupapuro
.backface-visibility() @visibility: visible Irinde guhindagurika kubirimo mugihe ukoresheje CSS ya 3D
.resizable() @direction: both Kora ikintu icyo aricyo cyose gishobora guhinduka iburyo no hepfo
.content-columns() @columnCount, @columnGap: @gridGutterWidth Kora ibikubiye mubintu byose ukoreshe CSS3
.hyphens() @mode: auto CSS3 hyphenation mugihe ubishaka (harimo word-wrap: break-word)

Amavu n'amavuko

Kuvanga Ibipimo Ikoreshwa
#translucent > .background() @color: @white, @alpha: 1 Tanga ikintu kibara ibara risobanutse
#translucent > .border() @color: @white, @alpha: 1 Tanga ikintu ibara risobanutse neza
#gradient > .vertical() @startColor, @endColor Kora cross-mushakisha vertical background gradient
#gradient > .horizontal() @startColor, @endColor Kora umusaraba-mushakisha utambitse inyuma ya gradient
#gradient > .directional() @startColor, @endColor, @deg Kora cross-mushakisha icyerekezo cyinyuma
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Kora cross-mushakisha-amabara atatu yinyuma ya gradient
#gradient > .radial() @innerColor, @outerColor Kora cross-mushakisha ya radiyo yinyuma ya gradient
#gradient > .striped() @color, @angle Kora cross-mushakisha umurongo winyuma ya gradient
#gradientBar() @primaryColor, @secondaryColor Byakoreshejwe kuri buto kugirango ugabanye urwego ruto kandi rwijimye gato
Icyitonderwa: Niba utanze icyifuzo cyo gukurura muri GitHub hamwe na CSS yahinduwe, ugomba gusubiramo CSS ukoresheje bumwe murubwo buryo.

Ibikoresho byo gukusanya

Node hamwe na makefile

Shyiramo LESS command umurongo utegura, JSHint, Ikiruhuko, na uglify-js kwisi yose hamwe npm ukoresheje itegeko rikurikira:

$ npm shyiramo -g gake jshint ikiruhuko uglify-js

Iyo umaze kwinjizamo gusa ukore makemumuzi yububiko bwa bootstrap kandi mwese murashizeho.

Byongeye kandi, niba ufite watchr yashizwemo, urashobora kwiruka make watchkugirango bootstrap ihite yubaka burigihe burigihe uhinduye dosiye muri bootstrap lib (ibi ntibisabwa, gusa uburyo bworoshye).

Umurongo

Shyiramo igikoresho cya LESS umurongo ukoresheje Node hanyuma ukore itegeko rikurikira:

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

Wemeze gushyiramo --compressiryo tegeko niba ugerageza kubika byite!

Javascript

Kuramo ibishya Less.js hanyuma ushiremo inzira igana (na Bootstrap) muri <head>.

<ihuza rel = "urupapuro rwerekana / ruto" href = "/ inzira/to/bootstrap.less" > <inyandiko src = " / inzira /  
 

Kugirango usubiremo dosiye .idafite, gusa uzigame hanyuma wongere usubiremo page yawe. Gito.js irabakusanya ikabika mububiko bwaho.

Porogaramu idasanzwe ya Mac

Porogaramu idasanzwe ya Mac ireba ububiko bwamadosiye adafite kandi ikusanya kode kumadosiye yaho nyuma yo kubika dosiye ireba. Idafite.

Niba ubishaka, urashobora guhinduranya ibyo ukunda muri porogaramu yo kugabanya mu buryo bwikora kandi ni ubuhe bubiko dosiye zakozwe zirangirira.

Porogaramu nyinshi za Mac

Crunch

Crunch nicyiza gisa na Muhinduzi na compiler yubatswe kuri Adobe Air.

CodeKit

Yakozwe numusore umwe na porogaramu ya Mac idasanzwe, CodeKit ni porogaramu ya Mac ikora LESS, SASS, Stylus, na CoffeeScript.

Ntibyoroshye

Porogaramu ya Mac, Linux, na PC yo gukurura no guta ikusanyamakuru rya LESS. Byongeye, code yinkomoko iri kuri GitHub .