Ukusebenzisa i-LESS ngeBootstrap
Yenza ngokwezifiso kwaye wandise i-Bootstrap nge - LESS , i-preprocessor ye-CSS, ukuthatha ithuba lokuguquguquka, imixube, kunye nezinye ezisetyenziselwa ukwakha i-Bootstrap's CSS.
Yakhiwe nge-LESS
Kutheni KUPHANTSI?
I-Bootstrap yenziwe nge-LESS kumbindi wayo, ulwimi oluguquguqukayo lweshiti lephepha elenziwe ngumhlobo wethu olungileyo, u- Alexis Sellier . Yenza ukuphuhlisa iinkqubo-based CSS ngokukhawuleza, lula, kwaye kumnandi ngakumbi.
Yintoni ebandakanyiweyo?
Njengolwandiso lwe-CSS, i-LESS ibandakanya izinto eziguquguqukayo, imixube yeekhowudi eziphinda zisetyenziswe, imisebenzi yezibalo ezilula, ukuzalanisa, kunye nemisebenzi yombala.
Izinto eziguquguqukayo
Ukulawula imibala kunye namaxabiso e-pixel kwi-CSS kunokuba yintlungu encinci, ihlala igcwele ikopi kunye nokuncamathisela. Hayi nge-LESS nangona-nika imibala okanye ixabiso le-pixel njengezinto eziguquguqukayo kwaye uzitshintshe kube kanye.
Imixube
Ezo zibhengezo zomda werediyasi ezintathu ekufuneka uyenzile kwi-CSS eqhelekileyo? Ngoku baphantsi kumgca omnye ngoncedo lwemixube, iziqwengana zekhowudi onokuphinda uzisebenzisele naphi na.
Imisebenzi
Yenza igridi yakho, ikhokele, kwaye ibe bhetyebhetye ngakumbi ngokwenza imathematika kubhabho ngemisebenzi. Zininzi, zahlula-hlula, zongeza, kwaye uthabathe indlela yakho eya kwi-CSS yengqondo.
Iinguqu ze-Bootstrap eziguquguqukayo eziphantsi, amaxabiso azo, kunye nezikhokelo zokusetyenziswa
Amakhonkco
@linkColor |
#08c | Umbala wombhalo wekhonkco omiselweyo | |
@linkColorHover |
darken(@linkColor, 15%) |
Ikhonkco elimiselweyo lombala wehove yesicatshulwa |
Inkqubo yegridi
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Ukuchwetheza
@baseFontSize |
13px | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18px |
Imibala engwevu
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
Imibala ye-accent
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Amacandelo
Amaqhosha
@primaryButtonBackground |
@linkColor |
Iifom
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Iifom zelizwe kunye nezilumkiso
@warningText |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Imixube yeBootstrap
Malunga nemixube
Imixube esisiseko
Umxube osisiseko kukubandakanya okanye inxenye yesnippet yeCSS. Zibhalwe njengeklasi yeCSS kwaye zinokubizwa naphi na.
- . into {
- . clearfix ();
- }
Imixube yeParametric
I-parametric mixin ifana nje nomxube osisiseko, kodwa iyayamkela iparameters (kungoko igama) ngamaxabiso angagqibekanga.
- . into {
- . umda - irediyasi ( 4px );
- }
Yongeza eyakho ngokulula
Phantse yonke imixube ye-Bootstrap igcinwe kwi-mixins.less, into emangalisayo eluncedo .ifayile encinci eyenza ukuba usebenzise i-mixin kuyo nayiphi na ifayile engaphantsi kwi-toolkit.
Ke, qhubeka usebenzise esele ukho okanye uzive ukhululekile ukongeza ezakho njengoko ufuna.
Ibandakanyiwe imixube
Izinto eziluncedo
| Mixin | Iiparamitha | Ukusetyenziswa |
|---|---|---|
.clearfix() |
akukho nanye | Yongeza nakuwuphi na umzali ukususa izinto ezidadayo ngaphakathi |
.tab-focus() |
akukho nanye | Faka isimbo sokugxila kwiWebkit kunye nolwandlalo olungqukuva lweFirefox |
.center-block() |
akukho nanye | Auto iziko ibhloko-level element usebenzisamargin: auto |
.ie7-inline-block() |
akukho nanye | Sebenzisa ukongeza rhoqo display: inline-blockukufumana inkxaso ye-IE7 |
.size() |
@height: 5px, @width: 5px |
Setha ngokukhawuleza ubude kunye nobubanzi kumgca omnye |
.square() |
@size: 5px |
Yakha .size()ukuseta ububanzi kunye nobude njengexabiso elifanayo |
.opacity() |
@opacity: 100 |
Seta, ngamanani apheleleyo, ipesenti yokungafihli (umz., "50" okanye "75") |
Iifom
| Mixin | Iiparamitha | Ukusetyenziswa |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Seta placeholderumbala wokubhaliweyo wamagalelo |
Ukuchwetheza
| Mixin | Iiparamitha | Ukusetyenziswa |
|---|---|---|
#font > #family > .serif() |
akukho nanye | Yenza isiqalelo sebenzisa isitakhi sefonti yeserif |
#font > #family > .sans-serif() |
akukho nanye | Yenza isiqalelo sebenzisa isitakhi sefonti sans-serif |
#font > #family > .monospace() |
akukho nanye | Yenza isiqalelo sebenzisa isitakhi sefonti ye-monospace |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Seta ngokulula ubungakanani befonti, ubunzima, kunye nokukhokela |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Seta usapho lwefonti kwi-serif, kwaye ulawule ubungakanani, ubunzima, kunye nokukhokela |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Seta usapho lwefonti kwi-sans-serif, kwaye ulawule ubungakanani, ubunzima, kunye nokukhokela |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Seta usapho lwefonti kwi-monospace, kunye nokulawula ubungakanani, ubunzima, kunye nokukhokela |
Inkqubo yegridi
| Mixin | Iiparamitha | Ukusetyenziswa |
|---|---|---|
.container-fixed() |
akukho nanye | Nikezela ngobubanzi obusisigxina (esetwe nge @siteWidth) isikhongozeli sokubamba umxholo wakho |
.columns() |
@columns: 1 |
Yakha ikholamu yegridi enwenwela kulo naliphi na inani leentsika (okwenyani ukuya kumhlathi omnye) |
.offset() |
@columns: 1 |
Misela umhlathi wegridi ngomda wasekhohlo odlula naliphi na inani leekholamu |
.gridColumn() |
akukho nanye | Yenza into idada njengekholamu yegridi |
Iimpawu zeCSS3
| Mixin | Iiparamitha | Ukusetyenziswa |
|---|---|---|
.border-radius() |
@radius: 5px |
Jikelezisa iikona zesiqalelo. Inokuba lixabiso elinye okanye amaxabiso amane ahlukaniswe isithuba |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Yongeza isithunzi sokulahla into |
.transition() |
@transition |
Yongeza isiphumo senguqu ye-CSS3 (umzekelo, all .2s linear) |
.rotate() |
@degrees |
Jikelezisa i element n izidanga |
.scale() |
@ratio |
Yenza umlinganiselo we-elementi ukuya ku- n amaxesha obungakanani bayo boqobo |
.translate() |
@x: 0, @y: 0 |
Hambisa isiqalelo kwi-x kunye ne-y iinqwelomoya |
.background-clip() |
@clip |
Nciphisa imvelaphi yento (iluncedo border-radius) |
.background-size() |
@size |
Lawula ubungakanani bemifanekiso yangasemva ngeCSS3 |
.box-sizing() |
@boxmodel |
Guqula imodeli yebhokisi yento (umzekelo, border-boxkububanzi obugcweleyo input) |
.user-select() |
@select |
Lawula isalathisi sokukhetha okubhaliweyo kwiphepha |
.resizable() |
@direction: both |
Yenza nasiphi na isiqalelo siphinde silingane ekunene nasezantsi |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Yenza umxholo wayo nayiphi na into usebenzise iikholamu zeCSS3 |
Imvelaphi kunye neegradient
| Mixin | Iiparamitha | Ukusetyenziswa |
|---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
Nika isiqalelo umbala ongasemva ogqameyo |
.#translucent > .border() |
@color: @white, @alpha: 1 |
Nika isiqalelo umbala ogqamileyo womda |
.#gradient > .vertical() |
@startColor, @endColor |
Yenza ibhrawuza enqamlezileyo ngokuthe nkqo ukuthambeka okungasemva |
.#gradient > .horizontal() |
@startColor, @endColor |
Yenza ibhrawuza enqamlezayo ethe tyaba ngasemva ngokuthambeka |
.#gradient > .directional() |
@startColor, @endColor, @deg |
Yenza i-gradient yemvelaphi yebrowser enqamlezayo |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Yenza ibhrawuza yemibala emithathu yegradient yangasemva |
.#gradient > .radial() |
@innerColor, @outerColor |
Create a cross-browser radial background gradient |
.#gradient > .striped() |
@color, @angle |
Create a cross-browser striped background gradient |
.#gradientBar() |
@primaryColor, @secondaryColor |
Used for buttons to assign a gradient and slightly darker border |
Compiling Bootstrap with LESS
Tools for compiling
Node with makefile
Install the LESS command line compiler with npm by running the following command:
$ npm install less
Once installed just run make from the root of your bootstrap directory and you're all set.
Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).
Command line
Install the LESS command line tool via Node and run the following command:
$ lessc ./lib/bootstrap.less > bootstrap.css
Be sure to include --compress in that command if you're trying to save some bytes!
Javascript
Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.
<link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script>
To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.
Unofficial Mac app
The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.
If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.
More Mac apps
Crunch
Crunch is a great looking LESS editor and compiler built on Adobe Air.
CodeKit
Yenziwe ngumfana ofanayo nosetyenziso olungekho semthethweni lwe-Mac, iCodeKit yi-app ye-Mac ehlanganisa i-LESS, i-SASS, i-Stylus, kunye ne-CoffeeScript.
Lula
IMac, iLinux, kunye nePC app yokutsala nokulahla ukuqulunqa iifayile eziphantsi. Ngaphezu koko, ikhowudi yomthombo ikwiGitHub .