Kutumia LESS na Bootstrap

Geuza kukufaa na upanue Bootstrap ukitumia LESS , kichakataji awali cha CSS, ili kunufaika na viambajengo, michanganyiko, na zaidi kutumika kuunda CSS ya Bootstrap.

Kwa nini CHINI?

Bootstrap imeundwa na LESS msingi wake, lugha ya laha ya mtindo inayobadilika iliyoundwa na rafiki yetu wa karibu, Alexis Sellier . Inafanya kuendeleza CSS kulingana na mifumo haraka, rahisi na ya kufurahisha zaidi.

Je, ni pamoja na nini?

Kama kiendelezi cha CSS, LESS inajumuisha vigeu, michanganyiko ya vijisehemu vya msimbo vinavyoweza kutumika tena, shughuli za hesabu rahisi, kuweka kiota na hata vipengele vya rangi.

Jifunze zaidi

CHINI CSS

Tembelea tovuti rasmi katika http://lesscss.org/ ili kujifunza zaidi.

Vigezo

Kudhibiti rangi na thamani za pikseli katika CSS kunaweza kuwa na uchungu kidogo, kwa kawaida kunakili na kubandika. Sio kwa LESS ingawa-peana rangi au maadili ya saizi kama vigeuzo na ubadilishe mara moja.

Mchanganyiko

Hayo matamko matatu ya mpaka-radius unahitaji kufanya katika ol' CSS ya kawaida? Sasa ziko chini ya mstari mmoja kwa usaidizi wa mchanganyiko, vijisehemu vya msimbo unaweza kutumia tena popote.

Uendeshaji

Fanya gridi yako, iongoze, na iwe rahisi kubadilika zaidi kwa kufanya hesabu kwa kuruka na shughuli. Zidisha, gawanya, ongeza, na uondoe njia yako hadi kwa utimamu wa CSS.

Kiunzi na viungo

@bodyBackground @white Rangi ya mandharinyuma ya ukurasa
@textColor @grayDark Rangi chaguomsingi ya maandishi kwa mwili mzima, vichwa na zaidi
@linkColor #08c Rangi ya maandishi ya kiungo chaguomsingi
@linkColorHover darken(@linkColor, 15%) Rangi ya kiungo chaguo-msingi ya kielee juu cha maandishi

Mfumo wa gridi ya taifa

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

Uchapaji

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Courier New", nafasi moja
@baseFontSize 13px Lazima ziwe saizi
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Lazima ziwe saizi
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Majedwali

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

Rangi za kijivu

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

Rangi za lafudhi

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

Vipengele

Vifungo

@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

Fomu

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

Majimbo ya fomu na arifa

@warningText #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #dff0d8
@infoText #3a87ad
@infoBackground #d9edf7

Upau wa urambazaji

@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

Kunjuzi

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

Kitengo cha shujaa

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Kuhusu mchanganyiko

Mchanganyiko wa kimsingi

Mchanganyiko wa kimsingi kimsingi ni pamoja au sehemu ya kijisehemu cha CSS. Zimeandikwa kama darasa la CSS na zinaweza kuitwa popote.

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

Mchanganyiko wa parametric

Mchanganyiko wa parametric ni kama mchanganyiko wa kimsingi, lakini pia inakubali vigezo (kwa hivyo jina) na maadili chaguo-msingi ya hiari.

  1. . kipengele {
  2. . mpaka - radius ( 4px );
  3. }

Ongeza yako mwenyewe kwa urahisi

Takriban michanganyiko yote ya Bootstrap imehifadhiwa katika mixins.less, faili ya matumizi ya ajabu .less ambayo hukuwezesha kutumia mchanganyiko katika faili zozote .chini kabisa kwenye kisanduku cha zana.

Kwa hivyo, endelea na utumie zilizopo au jisikie huru kuongeza yako unavyohitaji.

Imejumuisha mchanganyiko

Huduma

Mchanganyiko Vigezo Matumizi
.clearfix() hakuna Ongeza kwa mzazi yeyote ili kufuta vilivyoelea ndani
.tab-focus() hakuna Tumia mtindo wa kuzingatia wa Webkit na muhtasari wa pande zote wa Firefox
.center-block() hakuna Weka kiotomatiki kipengee cha kiwango cha kuzuia ukitumiamargin: auto
.ie7-inline-block() hakuna Tumia pamoja na ya kawaida display: inline-blockkupata usaidizi wa IE7
.size() @height @width Haraka kuweka urefu na upana kwenye mstari mmoja
.square() @size Hujenga .size()ili kuweka upana na urefu kama thamani sawa
.opacity() @opacity Weka, kwa nambari nzima, asilimia ya uwazi (kwa mfano, "50" au "75").

Fomu

Mchanganyiko Vigezo Matumizi
.placeholder() @color: @placeholderText Weka placeholderrangi ya maandishi kwa ingizo

Uchapaji

Mchanganyiko Vigezo Matumizi
#font > #family > .serif() hakuna Tengeneza kipengee kutumia safu ya fonti ya serif
#font > #family > .sans-serif() hakuna Tengeneza kipengee kutumia safu ya fonti ya sans-serif
#font > #family > .monospace() hakuna Tengeneza kipengee kutumia safu ya fonti ya nafasi moja
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Weka kwa urahisi saizi ya fonti, uzito na inayoongoza
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Weka familia ya fonti iwe serif, na udhibiti ukubwa, uzito na uongozi
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Weka familia ya fonti iwe sans-serif, na udhibiti ukubwa, uzito na uongozi
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Weka familia ya fonti iwe nafasi moja, na udhibiti ukubwa, uzito na uongozi

Mfumo wa gridi ya taifa

Mchanganyiko Vigezo Matumizi
.container-fixed() hakuna Unda kontena iliyo katikati ya mlalo kwa ajili ya kushikilia maudhui yako
#grid > .core() @gridColumnWidth, @gridGutterWidth Tengeneza mfumo wa gridi ya pikseli (chombo, safu mlalo na safu wima) na safu wima n na gutter pana ya x pixel
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Tengeneza asilimia ya mfumo wa gridi yenye safuwima n na x % ya gutter pana
#grid > .input() @gridColumnWidth, @gridGutterWidth Tengeneza mfumo wa gridi ya pikseli kwa inputvipengele, uhasibu kwa pedi na mipaka
.makeColumn @columns: 1, @offset: 0 Badilisha yoyote divkuwa safu wima ya gridi bila .span*madarasa

Tabia za CSS3

Mchanganyiko Vigezo Matumizi
.border-radius() @radius Zungusha pembe za kipengele. Inaweza kuwa thamani moja au thamani nne zilizotenganishwa na nafasi
.box-shadow() @shadow Ongeza kivuli cha kushuka kwenye kipengele
.transition() @transition Ongeza athari ya mpito ya CSS3 (kwa mfano, all .2s linear)
.rotate() @degrees Zungusha kipengele n digrii
.scale() @ratio Weka kipengele kwa n mara ya ukubwa wake asili
.translate() @x, @y Sogeza kipengele kwenye ndege za x na y
.background-clip() @clip Punguza usuli wa kipengele (muhimu kwa border-radius)
.background-size() @size Dhibiti saizi ya picha za mandharinyuma kupitia CSS3
.box-sizing() @boxmodel Badilisha muundo wa kisanduku cha kipengee (kwa mfano, border-boxkwa upana kamili input)
.user-select() @select Dhibiti uteuzi wa kishale wa maandishi kwenye ukurasa
.backface-visibility() @visibility: visible Zuia kupepesa kwa maudhui unapotumia mabadiliko ya CSS 3D
.resizable() @direction: both Fanya kipengele chochote kiweze kuongezwa ukubwa upande wa kulia na chini
.content-columns() @columnCount, @columnGap: @gridGutterWidth Fanya maudhui ya kipengele chochote kutumia safuwima za CSS3
.hyphens() @mode: auto Upatanisho wa CSS3 unapoutaka (pamoja na word-wrap: break-word)

Asili na gradients

Mchanganyiko Vigezo Matumizi
#translucent > .background() @color: @white, @alpha: 1 Kipe kipengele rangi ya mandharinyuma inayong'aa
#translucent > .border() @color: @white, @alpha: 1 Kipe kipengele rangi ya mpaka inayong'aa
#gradient > .vertical() @startColor, @endColor Unda upinde rangi wa usuli wa wima wa kivinjari
#gradient > .horizontal() @startColor, @endColor Unda upinde rangi wa mandharinyuma ya kivinjari mlalo
#gradient > .directional() @startColor, @endColor, @deg Unda upinde rangi wa usuli wa mwelekeo wa kivinjari
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Unda upinde rangi wa usuli wa kivinjari chenye rangi tatu
#gradient > .radial() @innerColor, @outerColor Unda upinde rangi wa mandharinyuma ya kivinjari
#gradient > .striped() @color, @angle Unda upinde rangi wa mandharinyuma yenye milia ya kivinjari
#gradientBar() @primaryColor, @secondaryColor Hutumika kwa ajili ya vitufe kupangia gradient na mpaka mweusi kidogo
Kumbuka: Ikiwa unatuma ombi la kuvuta kwa GitHub na CSS iliyorekebishwa, lazima urudishe CSS kupitia mojawapo ya njia hizi.

Zana za kuandaa

Nodi iliyo na makefile

Sakinisha mkusanyaji wa laini ya amri LESS, JSHint, Recess, na uglify-js kimataifa na npm kwa kutekeleza amri ifuatayo:

$ npm install -g less jshint recess ugify-js

Mara tu ikiwa imesakinishwa kimbia tu makekutoka kwa mzizi wa saraka yako ya bootstrap na uko tayari.

Kwa kuongeza, ikiwa umesakinisha watchr , unaweza kukimbia make watchili bootstrap ijengwe upya kiotomatiki kila wakati unapohariri faili kwenye bootstrap lib (hii haihitajiki, njia rahisi tu).

Mstari wa amri

Sakinisha zana ya mstari wa amri ya LESS kupitia Node na uendesha amri ifuatayo:

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

Hakikisha kujumuisha --compresskatika amri hiyo ikiwa unajaribu kuhifadhi baiti kadhaa!

Javascript

Pakua Less.js za hivi punde na ujumuishe njia yake (na Bootstrap) kwenye <head>.

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

Ili kukusanya tena faili .less, zihifadhi tu na upakie upya ukurasa wako. Less.js inazikusanya na kuzihifadhi katika hifadhi ya ndani.

Programu isiyo rasmi ya Mac

Programu isiyo rasmi ya Mac hutazama saraka za faili .less na kukusanya msimbo kwa faili za ndani baada ya kila uhifadhi wa faili iliyotazamwa.

Ukipenda, unaweza kugeuza mapendeleo katika programu kwa uboreshaji wa kiotomatiki na ni saraka gani ambayo faili zilizokusanywa huishia.

Programu zaidi za Mac

Kuponda

Crunch ni mhariri na mkusanyaji mzuri wa LESS aliyejengwa kwenye Adobe Air.

CodeKit

Imeundwa na mtu sawa na programu isiyo rasmi ya Mac, CodeKit ni programu ya Mac ambayo inajumuisha LESS, SASS, Stylus, na CoffeeScript.

Rahisi

Programu ya Mac, Linux, na Kompyuta ya kuburuta na kuangusha faili za LESS. Pamoja, nambari ya chanzo iko kwenye GitHub .