Geuza kukufaa na upanue Bootstrap ukitumia LESS , kichakataji awali cha CSS, ili kunufaika na viambajengo, michanganyiko, na zaidi kutumika kuunda CSS ya Bootstrap.
Bootstrap imeundwa na LESS katika 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.
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.
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.
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.
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.
@linkColor |
#08c | Rangi ya maandishi ya kiungo chaguomsingi | |
@linkColorHover |
darken(@linkColor, 15%) |
Rangi ya kiungo chaguo-msingi ya kielee juu cha maandishi |
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
@primaryButtonBackground |
@linkColor |
@placeholderText |
@grayLight |
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Mchanganyiko wa kimsingi kimsingi ni pamoja au sehemu ya kijisehemu cha CSS. Zimeandikwa kama darasa la CSS na zinaweza kuitwa popote.
- . kipengele {
- . clearfix ();
- }
Mchanganyiko wa parametric ni kama mchanganyiko wa kimsingi, lakini pia inakubali vigezo (kwa hivyo jina) na maadili chaguo-msingi ya hiari.
- . kipengele {
- . mpaka - radius ( 4px );
- }
Takriban michanganyiko yote ya Bootstrap huhifadhiwa katika mixins.less, faili ya matumizi ya ajabu .less ambayo hukuwezesha kutumia mchanganyiko katika faili zozote .chini katika kisanduku cha zana.
Kwa hivyo, endelea na utumie zilizopo au jisikie huru kuongeza yako unavyohitaji.
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 kwa kutumiamargin: auto |
.ie7-inline-block() |
hakuna | Tumia pamoja na ya kawaida display: inline-block kupata usaidizi wa IE7 |
.size() |
@height: 5px, @width: 5px |
Haraka kuweka urefu na upana kwenye mstari mmoja |
.square() |
@size: 5px |
Hujenga .size() ili kuweka upana na urefu kama thamani sawa |
.opacity() |
@opacity: 100 |
Weka, kwa nambari nzima, asilimia ya uwazi (kwa mfano, "50" au "75"). |
Mchanganyiko | Vigezo | Matumizi |
---|---|---|
.placeholder() |
@color: @placeholderText |
Weka placeholder rangi ya maandishi kwa ingizo |
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 |
Mchanganyiko | Vigezo | Matumizi |
---|---|---|
.container-fixed() |
hakuna | Toa chombo cha upana usiobadilika (kilichowekwa na @siteWidth ) kwa ajili ya kushikilia maudhui yako |
.columns() |
@columns: 1 |
Unda safu wima ya gridi inayojumuisha safu wima yoyote (chaguo-msingi hadi safu 1) |
.offset() |
@columns: 1 |
Rekebisha safu wima ya gridi yenye ukingo wa kushoto ambao unachukua safu wima yoyote |
.gridColumn() |
hakuna | Fanya kipengele kuelea kama safu wima ya gridi ya taifa |
Mchanganyiko | Vigezo | Matumizi |
---|---|---|
.border-radius() |
@radius: 5px |
Zungusha pembe za kipengele. Inaweza kuwa thamani moja au thamani nne zilizotenganishwa na nafasi |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
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: 0, @y: 0 |
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-box kwa upana kamili input ) |
.user-select() |
@select |
Dhibiti uteuzi wa kishale wa maandishi kwenye ukurasa |
.resizable() |
@direction: both |
Fanya kipengele chochote kiweze kuongezwa ukubwa upande wa kulia na chini |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Fanya maudhui ya kipengele chochote kutumia safuwima za CSS3 |
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 |
Sakinisha mkusanyaji wa laini ya amri LESS ulimwenguni na npm kwa kutekeleza amri ifuatayo:
$ npm install -g less
Mara tu ikiwa imesakinishwa kimbia tu make
kutoka kwa mzizi wa saraka yako ya bootstrap na uko tayari.
Kwa kuongeza, ikiwa umesakinisha watchr , unaweza kukimbia make watch
ili bootstrap ijengwe upya kiotomatiki kila wakati unapohariri faili kwenye bootstrap lib (hii haihitajiki, njia rahisi tu).
Sakinisha zana ya mstari wa amri ya LESS kupitia Node na endesha amri ifuatayo:
$ lessc ./lib/bootstrap.less > bootstrap.css
Hakikisha kujumuisha --compress
katika amri hiyo ikiwa unajaribu kuhifadhi baiti kadhaa!
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 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.
Crunch ni mhariri na mkusanyaji mzuri wa LESS aliyejengwa kwenye Adobe Air.
Imeundwa na mtu sawa na programu isiyo rasmi ya Mac, CodeKit ni programu ya Mac ambayo inajumuisha LESS, SASS, Stylus, na CoffeeScript.
Programu ya Mac, Linux, na Kompyuta kwa ajili ya kuburuta na kuangusha faili za LESS. Pamoja, nambari ya chanzo iko kwenye GitHub .