Paggamit ng LESS sa Bootstrap
I-customize at i-extend ang Bootstrap gamit ang LESS , isang CSS preprocessor, upang samantalahin ang mga variable, mixin, at higit pang ginagamit sa pagbuo ng CSS ng Bootstrap.
Itinayo gamit ang MABAIT
Bakit KULANG?
Ang Bootstrap ay ginawa gamit ang LESS sa core nito, isang dynamic na stylesheet na wika na nilikha ng aming mabuting kaibigan, si Alexis Sellier . Ginagawa nitong mas mabilis, mas madali, at mas masaya ang pagbuo ng CSS na nakabatay sa mga system.
Ano ang kasama?
Bilang extension ng CSS, ang LESS ay kinabibilangan ng mga variable, mixin para sa magagamit muli na mga snippet ng code, mga operasyon para sa simpleng matematika, nesting, at kahit na mga function ng kulay.
Mga variable
Ang pamamahala sa mga kulay at mga halaga ng pixel sa CSS ay maaaring medyo masakit, kadalasang puno ng kopya at i-paste. Gayunpaman, hindi sa LESS—magtalaga ng mga kulay o mga halaga ng pixel bilang mga variable at baguhin ang mga ito nang isang beses.
Mixins
Ang tatlong deklarasyon ng border-radius na kailangan mong gawin sa regular na CSS? Ngayon ay nasa isang linya na sila sa tulong ng mga mixin, mga snippet ng code na maaari mong gamitin muli kahit saan.
Mga operasyon
Gawing super flexible ang iyong grid, leading, at higit na flexible sa pamamagitan ng paggawa ng math on the fly gamit ang mga operasyon. I-multiply, hatiin, idagdag, at ibawas ang iyong paraan sa CSS sanity.
Ang mga variable ng Bootstrap ay mas kaunting mga variable, ang kanilang mga halaga, at mga alituntunin sa paggamit
Mga hyperlink
@linkColor |
#08c | Default na kulay ng text ng link | |
@linkColorHover |
darken(@linkColor, 15%) |
Default na kulay ng hover ng text ng link |
Grid system
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Typography
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
Mga kulay na grayscale
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
Mga kulay ng accent
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Mga bahagi
Mga Pindutan
@primaryButtonBackground |
@linkColor |
Mga porma
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Mga estado ng form at mga alerto
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Mga mix ng bootstrap
Tungkol sa mixins
Mga pangunahing mixin
Ang pangunahing mixin ay mahalagang kasama o bahagyang para sa isang snippet ng CSS. Isinulat ang mga ito tulad ng isang klase ng CSS at maaaring tawagan kahit saan.
- . elemento {
- . clearfix ();
- }
Parametric mixins
Ang parametric mixin ay katulad lang ng basic mixin, ngunit tumatanggap din ito ng mga parameter (kaya ang pangalan) na may mga opsyonal na default na value.
- . elemento {
- . hangganan - radius ( 4px );
- }
Madaling idagdag ang iyong sarili
Halos lahat ng mga mixin ng Bootstrap ay naka-imbak sa mixins.less, isang napakagandang utility .less file na nagbibigay-daan sa iyong gumamit ng mixin sa alinman sa mga .less na file sa toolkit.
Kaya, magpatuloy at gamitin ang mga umiiral na o huwag mag-atubiling magdagdag ng iyong sarili ayon sa kailangan mo.
Kasama ang mga mixin
Mga utility
| Mixin | Mga Parameter | Paggamit |
|---|---|---|
.clearfix() |
wala | Idagdag sa sinumang magulang upang i-clear ang mga float sa loob |
.tab-focus() |
wala | Ilapat ang estilo ng focus sa Webkit at bilog na balangkas ng Firefox |
.center-block() |
wala | Auto center ang isang block-level na elemento gamitmargin: auto |
.ie7-inline-block() |
wala | Gamitin bilang karagdagan sa regular display: inline-blockupang makakuha ng suporta sa IE7 |
.size() |
@height: 5px, @width: 5px |
Mabilis na itakda ang taas at lapad sa isang linya |
.square() |
@size: 5px |
Bumubuo .size()upang itakda ang lapad at taas bilang parehong halaga |
.opacity() |
@opacity: 100 |
Itakda, sa mga buong numero, ang porsyento ng opacity (hal., "50" o "75") |
Mga porma
| Mixin | Mga Parameter | Paggamit |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Itakda ang placeholderkulay ng teksto para sa mga input |
Typography
| Mixin | Mga Parameter | Paggamit |
|---|---|---|
#font > #family > .serif() |
wala | Gumawa ng isang elemento gamit ang isang serif font stack |
#font > #family > .sans-serif() |
wala | Gumawa ng isang elemento gamit ang isang sans-serif font stack |
#font > #family > .monospace() |
wala | Gumawa ng isang elemento gamit ang isang monospace font stack |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Madaling itakda ang laki ng font, timbang, at nangungunang |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Itakda ang pamilya ng font sa serif, at kontrolin ang laki, timbang, at nangungunang |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Itakda ang pamilya ng font sa sans-serif, at kontrolin ang laki, timbang, at nangungunang |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Itakda ang pamilya ng font sa monospace, at kontrolin ang laki, timbang, at nangungunang |
Grid system
| Mixin | Mga Parameter | Paggamit |
|---|---|---|
.container-fixed() |
wala | Gumawa ng isang pahalang na nakasentro na lalagyan para sa paghawak ng iyong nilalaman |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Bumuo ng pixel grid system (container, row, at columns) na may n column at x pixel wide gutter |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
Bumuo ng isang kasalukuyang sistema ng grid na may n column at x % na malawak na gutter |
Mga katangian ng CSS3
| Mixin | Mga Parameter | Paggamit |
|---|---|---|
.border-radius() |
@radius: 5px |
Bilugan ang mga sulok ng isang elemento. Maaaring iisang value o apat na value na pinaghihiwalay ng espasyo |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Magdagdag ng drop shadow sa isang elemento |
.transition() |
@transition |
Magdagdag ng CSS3 transition effect (hal, all .2s linear) |
.rotate() |
@degrees |
Paikutin ang isang elemento n degrees |
.scale() |
@ratio |
I-scale ang isang elemento sa n beses sa orihinal na laki nito |
.translate() |
@x: 0, @y: 0 |
Ilipat ang isang elemento sa x at y na eroplano |
.background-clip() |
@clip |
I-crop ang background ng isang elemento (kapaki-pakinabang para sa border-radius) |
.background-size() |
@size |
Kontrolin ang laki ng mga larawan sa background sa pamamagitan ng CSS3 |
.box-sizing() |
@boxmodel |
Baguhin ang modelo ng kahon para sa isang elemento (hal., border-boxpara sa isang buong lapad input) |
.user-select() |
@select |
Kontrolin ang pagpili ng cursor ng teksto sa isang pahina |
.resizable() |
@direction: both |
Gawing resizable ang anumang elemento sa kanan at ibaba |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Gawin ang nilalaman ng anumang elemento gamit ang mga column ng CSS3 |
Mga background at gradient
| Mixin | Mga Parameter | Paggamit |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
Bigyan ang isang elemento ng translucent na kulay ng background |
#translucent > .border() |
@color: @white, @alpha: 1 |
Bigyan ang isang elemento ng translucent na kulay ng hangganan |
#gradient > .vertical() |
@startColor, @endColor |
Lumikha ng cross-browser vertical background gradient |
#gradient > .horizontal() |
@startColor, @endColor |
Gumawa ng cross-browser na pahalang na gradient ng background |
#gradient > .directional() |
@startColor, @endColor, @deg |
Lumikha ng cross-browser na direksyon ng background gradient |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Gumawa ng cross-browser na tatlong-kulay na gradient ng background |
#gradient > .radial() |
@innerColor, @outerColor |
Gumawa ng cross-browser radial background gradient |
#gradient > .striped() |
@color, @angle |
Gumawa ng cross-browser na may guhit na gradient ng background |
#gradientBar() |
@primaryColor, @secondaryColor |
Ginagamit para sa mga pindutan upang magtalaga ng gradient at bahagyang mas madilim na hangganan |
Kino-compile ang Bootstrap na may LESS
Mga tool para sa pag-compile
Node na may makefile
I-install ang LESS command line compiler at uglify-js sa buong mundo gamit ang npm sa pamamagitan ng pagpapatakbo ng sumusunod na command:
$ npm install -g less uglify-js
Kapag na-install na, tumakbo lang makemula sa ugat ng iyong direktoryo ng bootstrap at handa ka na.
Bukod pa rito, kung mayroon kang naka-install na watchr , maaari kang tumakbo make watchupang awtomatikong muling buuin ang bootstrap sa tuwing mag-e-edit ka ng file sa bootstrap lib (hindi ito kinakailangan, isang paraan lamang ng kaginhawahan).
Command line
I-install ang LESS command line tool sa pamamagitan ng Node at patakbuhin ang sumusunod na command:
$ lessc ./lib/bootstrap.less > bootstrap.css
Tiyaking isama --compresssa utos na iyon kung sinusubukan mong mag-save ng ilang byte!
JavaScript
I-download ang pinakabagong Less.js at isama ang path dito (at Bootstrap) sa <head>.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Upang muling i-compile ang mga .less na file, i-save lang ang mga ito at i-reload ang iyong page. Kino-compile sila ng Less.js at iniimbak ang mga ito sa lokal na storage.
Hindi opisyal na Mac app
Ang hindi opisyal na Mac app ay nanonood ng mga direktoryo ng .less na mga file at kino-compile ang code sa mga lokal na file pagkatapos ng bawat pag-save ng isang pinanood na .less na file.
Kung gusto mo, maaari mong i-toggle ang mga kagustuhan sa app para sa awtomatikong pagpapaliit at kung saang direktoryo napupunta ang mga pinagsama-samang file.
Higit pang mga Mac app
Crunch
Ang Crunch ay isang mahusay na mukhang LESS editor at compiler na binuo sa Adobe Air.
CodeKit
Ginawa ng parehong tao bilang hindi opisyal na Mac app, ang CodeKit ay isang Mac app na nag-compile ng LESS, SASS, Stylus, at CoffeeScript.
Simple
Mac, Linux, at PC app para sa pag-drag at drop ng pag-compile ng mas kaunting mga file. Dagdag pa, ang source code ay nasa GitHub .