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

Mas kaunting CSS

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.

  1. . elemento {
  2. . clearfix ();
  3. }

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.

  1. . elemento {
  2. . hangganan - radius ( 4px );
  3. }

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 @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 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 percent grid system na may n column at x % wide gutter
#grid > .input() @gridColumnWidth, @gridGutterWidth Bumuo ng pixel grid system para sa mga inputelemento, accounting para sa padding at mga hangganan
.makeColumn @columns: 1, @offset: 0 Gawing divgrid 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-boxpara 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.

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 .