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.
Yubatswe na LESS
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.
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.
Impinduka za Bootstrap Impinduka nke, indangagaciro zabo, nubuyobozi bukoreshwa
Imiyoboro
@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
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
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
@primaryButtonBackground |
@linkColor |
Ifishi
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Shiraho leta no kumenyesha
@warningText |
# c09853 | |
@warningBackground |
# f3edd2 | |
@errorText |
# b94a48 | |
@errorBackground |
# f2dede | |
@successText |
# 468847 | |
@successBackground |
# dff0d8 | |
@infoText |
# 3a87ad | |
@infoBackground |
# d9edf7 |
Bootstrap ivanze
Ibyerekeye kuvanga
Uruvange rwibanze
Ivanga shingiro mubyukuri harimo gushiramo cyangwa igice kubice bya CSS. Byanditswe nkicyiciro cya CSS kandi birashobora guhamagarwa ahantu hose.
- . element {
- . ibisobanuro ();
- }
Imvange ya Parametric
Ivangavanga risanzwe ni nkivanga shingiro, ariko kandi ryemera ibipimo (niyo mpamvu izina) hamwe nibisanzwe bitemewe.
- . element {
- . umupaka - radiyo ( 4px );
- }
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: 5px, @width: 5px |
Shiraho vuba uburebure n'ubugari kumurongo umwe |
.square() |
@size: 5px |
Yubaka .size()kugirango ashyireho ubugari n'uburebure agaciro kamwe |
.opacity() |
@opacity: 100 |
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 sisitemu ya sisitemu ya sisitemu hamwe n inkingi na x % ubugari |
Imiterere ya CSS3
| Kuvanga | Ibipimo | Ikoreshwa |
|---|---|---|
.border-radius() |
@radius: 5px |
Kuzenguruka inguni z'ikintu. Irashobora kuba agaciro kamwe cyangwa bane umwanya utandukanijwe nagaciro |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
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: 0, @y: 0 |
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 |
.resizable() |
@direction: both |
Kora ikintu icyo aricyo cyose gishobora guhinduka iburyo no hepfo |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Kora ibikubiye mubintu byose ukoreshe CSS3 |
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 |
Gukusanya Bootstrap hamwe na LESS
Ibikoresho byo gukusanya
Node hamwe na makefile
Shyiramo LESS command umurongo utegura hanyuma uglify-js kwisi yose hamwe npm ukoresheje itegeko rikurikira:
$ npm shyiramo -g gake 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 ./lib/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 .