Kugwiritsa ntchito LESS ndi Bootstrap
Sinthani Mwamakonda Anu ndikukulitsa Bootstrap ndi LESS , CSS preprocessor, kuti mutengere mwayi pazosintha, zosakaniza, ndi zina zomwe zimagwiritsidwa ntchito pomanga CSS ya Bootstrap.
Yomangidwa ndi LESS
Chifukwa chiyani ZOCHEPA?
Bootstrap imapangidwa ndi LESS pachimake, chilankhulo chosinthika chamitundu yopangidwa ndi bwenzi lathu lapamtima, Alexis Sellier . Zimapangitsa kupanga CSS yokhazikika pamakina mwachangu, kosavuta, komanso kosangalatsa.
Zomwe zikuphatikizidwa?
Monga chowonjezera cha CSS, LESS imaphatikizapo zosinthika, zosakaniza za ma code osinthika, magwiridwe antchito a masamu osavuta, zisa, ngakhale mitundu.
Zosintha
Kuwongolera mitundu ndi ma pixel mu CSS kumatha kukhala kowawa pang'ono, nthawi zambiri kumadzaza ndi kukopera ndi kumata. Osati ndi LESS ngakhale-perekani mitundu kapena ma pixel ngati zosinthika ndikusintha kamodzi.
Zosakaniza
Zolengeza zitatu zomwe muyenera kuzipanga mu CSS nthawi zonse? Tsopano atsikira pamzere umodzi mothandizidwa ndi ma mixins, zidule zamakhodi omwe mungagwiritsenso ntchito kulikonse.
Zochita
Pangani gululi yanu, yotsogola, komanso yosinthika kwambiri pochita masamu pakuwuluka ndi ntchito. Chulukitsani, gawani, onjezani, ndi kuchotsa njira yanu ku CSS mwanzeru.
Zosintha za Bootstrap LESS, mayendedwe awo, ndi malangizo ogwiritsira ntchito
Ma hyperlink
@linkColor |
#08c | Mtundu wa mawu a ulalo wofikira | |
@linkColorHover |
darken(@linkColor, 15%) |
Ulalo wofikira mtundu wa hover ya mawu |
Grid system
@gridColumns |
12 |
@gridColumnWidth |
60px pa |
@gridGutterWidth |
20px pa |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Kujambula
@baseFontSize |
13px pa |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px pa |
Mitundu ya Grayscale
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
Mitundu ya mawu
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Zigawo
Mabatani
@primaryButtonBackground |
@linkColor |
Mafomu
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px pa | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Ma fomu ndi zidziwitso
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Zosakaniza za Bootstrap
Za zosakaniza
Zosakaniza zoyambira
Kusakaniza kofunikira kumaphatikizaponso kuphatikizika kapena pang'ono pazachidule za CSS. Amalembedwa ngati kalasi ya CSS ndipo amatha kutchedwa kulikonse.
- . chinthu {
- . clearfix ();
- }
Zosakaniza za Parametric
Kusakaniza kwa parametric kuli ngati mixin yoyambira, koma imavomerezanso magawo (chifukwa chake dzina) yokhala ndi zosankha zosasinthika.
- . chinthu {
- . malire - utali wozungulira ( 4px );
- }
Onjezani zanu mosavuta
Pafupifupi zosakaniza zonse za Bootstrap zimasungidwa mu mixins.less, ntchito yodabwitsa .fayilo yocheperako yomwe imakuthandizani kuti mugwiritse ntchito mixin mu fayilo iliyonse ya .less mu toolkit.
Chifukwa chake, pitilizani kugwiritsa ntchito zomwe zilipo kale kapena omasuka kuwonjezera zanu momwe mukufunira.
Kuphatikizapo zosakaniza
Zothandizira
| Sakanizani | Parameters | Kugwiritsa ntchito |
|---|---|---|
.clearfix() |
palibe | Onjezani kwa kholo lililonse kuti muchotse zoyandama mkati |
.tab-focus() |
palibe | Ikani mawonekedwe a Webkit ndikuzungulira Firefox |
.center-block() |
palibe | Auto pakati pa block-level element pogwiritsa ntchitomargin: auto |
.ie7-inline-block() |
palibe | Gwiritsani ntchito kuphatikiza pafupipafupi display: inline-blockkuti mupeze thandizo la IE7 |
.size() |
@height: 5px, @width: 5px |
Mwachangu ikani kutalika ndi m'lifupi pamzere umodzi |
.square() |
@size: 5px |
Amamanga .size()kuti akhazikitse m'lifupi ndi kutalika ngati mtengo womwewo |
.opacity() |
@opacity: 100 |
Khazikitsani, mu manambala athunthu, kuchuluka kwa kuwala (monga "50" kapena "75") |
Mafomu
| Sakanizani | Parameters | Kugwiritsa ntchito |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Khazikitsani placeholdermtundu wa mawu pazolowetsa |
Kujambula
| Sakanizani | Parameters | Kugwiritsa ntchito |
|---|---|---|
#font > #family > .serif() |
palibe | Pangani chinthu pogwiritsa ntchito stack ya serif |
#font > #family > .sans-serif() |
palibe | Pangani chinthu gwiritsani ntchito stack ya sans-serif |
#font > #family > .monospace() |
palibe | Pangani chinthu pogwiritsa ntchito stack monospace font |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Khazikitsani kukula kwa zilembo mosavuta, kulemera kwake, ndi kutsogolera |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Khazikitsani banja la fonti kukhala serif, ndikuwongolera kukula, kulemera, ndi kutsogolera |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Khazikitsani banja la fonti kukhala sans-serif, ndikuwongolera kukula, kulemera, ndi kutsogolera |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Khazikitsani banja la fonti kukhala monospace, ndikuwongolera kukula, kulemera, ndi kutsogolera |
Grid system
| Sakanizani | Parameters | Kugwiritsa ntchito |
|---|---|---|
.container-fixed() |
palibe | Pangani chidebe choyang'ana pakati kuti musunge zomwe muli nazo |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Pangani dongosolo la gridi ya pixel (chotengera, mizere, ndi mizati) yokhala ndi n mizati ndi ngalande za x pixel wide |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
Pangani makina a gridi apamwamba kwambiri okhala ndi n mizati ndi x % ngalande zazikulu |
Zithunzi za CSS3
| Sakanizani | Parameters | Kugwiritsa ntchito |
|---|---|---|
.border-radius() |
@radius: 5px |
Kuzungulira ngodya za chinthu. Itha kukhala mtengo umodzi kapena magawo anayi olekanitsa malo |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Onjezani mthunzi wotsitsa ku chinthu |
.transition() |
@transition |
Onjezani kusintha kwa CSS3 (mwachitsanzo, all .2s linear) |
.rotate() |
@degrees |
Sinthani ma element n madigiri |
.scale() |
@ratio |
Onjezani chinthu ku n kuchulukitsa kukula kwake koyambirira |
.translate() |
@x: 0, @y: 0 |
Sunthani chinthu pa ndege za x ndi y |
.background-clip() |
@clip |
Dulani maziko a chinthu (chothandiza border-radius) |
.background-size() |
@size |
Sinthani kukula kwazithunzi zakumbuyo kudzera pa CSS3 |
.box-sizing() |
@boxmodel |
Sinthani bokosi lachitsanzo cha chinthu (monga border-boxkukula kwathunthu input) |
.user-select() |
@select |
Sinthani kusankha kwa cholozera patsamba |
.resizable() |
@direction: both |
Pangani chinthu chilichonse kuti chiwonjezeke kumanja ndi pansi |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Pangani zomwe zili muzinthu zilizonse zigwiritse ntchito mizati ya CSS3 |
Zoyambira ndi ma gradients
| Sakanizani | Parameters | Kugwiritsa ntchito |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
Perekani chinthu mtundu wakumbuyo wowonekera |
#translucent > .border() |
@color: @white, @alpha: 1 |
Perekani chinthu mtundu wamalire wowoneka bwino |
#gradient > .vertical() |
@startColor, @endColor |
Pangani chopendekera chakumbuyo kwa msakatuli woyimirira |
#gradient > .horizontal() |
@startColor, @endColor |
Pangani chopingasa chopingasa chopingasa chakumbuyo gradient |
#gradient > .directional() |
@startColor, @endColor, @deg |
Pangani chowongolera chakumbuyo chakumbuyo kwa msakatuli |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Pangani msakatuli wamitundu itatu wakumbuyo gradient |
#gradient > .radial() |
@innerColor, @outerColor |
Pangani chowongoka chozungulira msakatuli wa radial background gradient |
#gradient > .striped() |
@color, @angle |
Pangani chopendekera chakumbuyo cha msakatuli chamizeremizere |
#gradientBar() |
@primaryColor, @secondaryColor |
Amagwiritsidwa ntchito pa mabatani kuti awonetse malire a gradient ndi akuda pang'ono |
Kupanga Bootstrap ndi LESS
Zida zopangira
Node yokhala ndi makefile
Ikani LESS command line compiler ndi ugify-js padziko lonse lapansi ndi npm poyendetsa lamulo ili:
$ npm install -g less ugify-js
Mukangoyika, ingothamanga makekuchokera muzu wa bootstrap directory ndipo mwakonzeka.
Kuphatikiza apo, ngati mwayika watchr , mutha kuthamanga make watchkuti bootstrap imangidwenso nthawi zonse mukasintha fayilo mu bootstrap lib (izi sizofunikira, njira yosavuta).
Mzere wolamula
Ikani chida cha mzere wa LESS kudzera pa Node ndikuyendetsa lamulo ili:
$ lessc ./lib/bootstrap.less > bootstrap.css
Onetsetsani kuti muphatikizepo --compresslamuloli ngati mukuyesera kusunga ma byte ena!
Javascript
Tsitsani zaposachedwa za Les.js ndikuphatikiza njira yopitako (ndi Bootstrap) mu fayilo ya <head>.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Kuti mukonzenso mafayilo a .less, ingowasunga ndikutsitsanso tsamba lanu. Less.js amazipanga ndikuzisunga m'malo osungira kwanuko.
Pulogalamu ya Mac yosavomerezeka
Pulogalamu yosavomerezeka ya Mac imayang'ana maulozera a mafayilo .less ndikuphatikiza ma code kumafayilo am'deralo pambuyo pa kusungidwa kulikonse kwa fayilo yowonera .less.
Ngati mukufuna, mutha kusintha zokonda mu pulogalamuyo kuti muzingodzipangira zokha komanso kuti mafayilo omwe aphatikizidwa amatheramo.
Mapulogalamu ena a Mac
Crunch
Crunch ndiwowoneka bwino kwambiri wa LESS mkonzi komanso wopanga zinthu zomangidwa pa Adobe Air.
KodiKit
Wopangidwa ndi munthu yemweyo ngati pulogalamu ya Mac yosavomerezeka, CodeKit ndi pulogalamu ya Mac yomwe imapanga LESS, SASS, Stylus, ndi CoffeeScript.
Zosavuta
Mac, Linux, ndi pulogalamu ya PC yokoka ndikuponya mafayilo Ochepa. Kuphatikiza apo, code source ili pa GitHub .