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.

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.

Matuto pa

Bisitahin ang opisyal na website sa http://lesscss.org/ para matuto pa.

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.

Scaffolding at mga link

`@bodyBackground`	`@white`	Kulay ng background ng page
`@textColor`	`@grayDark`	Default na kulay ng text para sa buong katawan, mga heading, at higit pa
`@linkColor`	`#08c`	Default na kulay ng text ng link
`@linkColorHover`	`darken(@linkColor, 15%)`	Default na kulay ng text hover ng link

Grid system

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

Typography

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier New", monospace
`@baseFontSize`	13px	Dapat ay mga pixel
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Dapat ay mga pixel
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Mga mesa

`@tableBackground`	`transparent`
`@tableBackgroundAccent`	`#f9f9f9`
`@tableBackgroundHover`	`#f5f5f5`
`@tableBorder`	`ddd`

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

`@btnBackground`	`@white`
`@btnBackgroundHighlight`	`darken(@white, 10%)`
`@btnBorder`	`darken(@white, 20%)`
`@btnPrimaryBackground`	`@linkColor`
`@btnPrimaryBackgroundHighlight`	`spin(@btnPrimaryBackground, 15%)`
`@btnInfoBackground`	`#5bc0de`
`@btnInfoBackgroundHighlight`	`#2f96b4`
`@btnSuccessBackground`	`#62c462`
`@btnSuccessBackgroundHighlight`	`51a351`
`@btnWarningBackground`	`lighten(@orange, 15%)`
`@btnWarningBackgroundHighlight`	`@orange`
`@btnDangerBackground`	`#ee5f5b`
`@btnDangerBackgroundHighlight`	`#bd362f`
`@btnInverseBackground`	`@gray`
`@btnInverseBackgroundHighlight`	`@grayDarker`

Mga porma

`@placeholderText`	`@grayLight`
`@inputBackground`	`@white`
`@inputBorder`	`#ccc`
`@inputBorderRadius`	`3px`
`@inputDisabledBackground`	`@grayLighter`
`@formActionsBackground`	`#f5f5f5`

Mga estado ng form at mga alerto

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

Navbar

`@navbarHeight`	40px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`
`@navbarLinkColorActive`	`@navbarLinkColorHover`
`@navbarLinkBackgroundHover`	`transparent`
`@navbarLinkBackgroundActive`	`@navbarBackground`
`@navbarSearchBackground`	`lighten(@navbarBackground, 25%)`
`@navbarSearchBackgroundFocus`	`@white`
`@navbarSearchBorder`	`darken(@navbarSearchBackground, 30%)`
`@navbarSearchPlaceholderColor`	`#ccc`
`@navbarBrandColor`	`@navbarLinkColor`

Mga dropdown

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

Hero unit

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

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 gamit`margin: auto`
`.ie7-inline-block()`	wala	Gamitin bilang karagdagan sa regular `display: inline-block`upang makakuha ng suporta sa IE7
`.size()`	`@height @width`	Mabilis na itakda ang taas at lapad sa isang linya
`.square()`	`@size`	Bumubuo `.size()`upang itakda ang lapad at taas bilang parehong halaga
`.opacity()`	`@opacity`	Itakda, sa mga buong numero, ang porsyento ng opacity (hal., "50" o "75")

Mga porma

Mixin	Mga Parameter	Paggamit
`.placeholder()`	`@color: @placeholderText`	Itakda ang `placeholder`kulay 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 percent grid system na may n column at x % wide gutter
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Bumuo ng pixel grid system para sa mga `input`elemento, accounting para sa padding at mga hangganan
`.makeColumn`	`@columns: 1, @offset: 0`	Gawing `div`grid column ang anuman na walang mga `.span*`klase

Mga katangian ng CSS3

Mixin	Mga Parameter	Paggamit
`.border-radius()`	`@radius`	Bilugan ang mga sulok ng isang elemento. Maaaring iisang value o apat na value na pinaghihiwalay ng espasyo
`.box-shadow()`	`@shadow`	Magdagdag ng drop shadow sa isang elemento
`.transition()`	`@transition`	Magdagdag ng CSS3 transition effect (hal, `all .2s linear`)
`.rotate()`	`@degrees`	I-rotate ang isang elemento n degrees
`.scale()`	`@ratio`	I-scale ang isang elemento sa n beses sa orihinal na laki nito
`.translate()`	`@x, @y`	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-box`para sa isang buong lapad `input`)
`.user-select()`	`@select`	Kontrolin ang pagpili ng cursor ng teksto sa isang pahina
`.backface-visibility()`	`@visibility: visible`	Pigilan ang pagkutitap ng content kapag gumagamit ng CSS 3D transforms
`.resizable()`	`@direction: both`	Gawing resizable ang anumang elemento sa kanan at ibaba
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Gawin ang nilalaman ng anumang elemento gamit ang mga column ng CSS3
`.hyphens()`	`@mode: auto`	CSS3 hyphenation kapag gusto mo ito (kasama ang `word-wrap: break-word`)

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`	Gumawa ng cross-browser na direksyon na gradient ng background
`#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 striped na background gradient
`#gradientBar()`	`@primaryColor, @secondaryColor`	Ginagamit para sa mga pindutan upang magtalaga ng gradient at bahagyang mas madilim na hangganan

Tandaan: Kung nagsusumite ka ng pull request sa GitHub na may binagong CSS, dapat mong i- compile muli ang CSS sa pamamagitan ng alinman sa mga pamamaraang ito.

Mga tool para sa pag-compile

Node na may makefile

I-install ang LESS command line compiler, JSHint, Recess, at uglify-js sa buong mundo gamit ang npm sa pamamagitan ng pagpapatakbo ng sumusunod na command:

$ npm install -g less jshint recess 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 ./less/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 pinapanood 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.

Itinayo gamit ang MABAIT

Bakit KULANG?

Ano ang kasama?

Matuto pa

Mga variable

Mixins

Mga operasyon

Ang mga variable ng Bootstrap ay mas kaunting mga variable, ang kanilang mga halaga, at mga alituntunin sa paggamit

Scaffolding at mga link

Grid system

Typography

Mga mesa

Mga kulay na grayscale

Mga kulay ng accent

Mga bahagi

Mga Pindutan

Mga porma

Mga estado ng form at mga alerto

Navbar

Mga dropdown

Hero unit

Mga mix ng bootstrap

Tungkol sa mixins

Mga pangunahing mixin

Parametric mixins

Madaling idagdag ang iyong sarili

Kasama ang mga mixin

Mga utility

Mga porma

Typography

Grid system

Mga katangian ng CSS3

Mga background at gradient

Kino-compile ang Bootstrap na may LESS

Mga tool para sa pag-compile

Node na may makefile

Command line

JavaScript

Hindi opisyal na Mac app

Higit pang mga Mac app

Crunch

CodeKit

Simple