Nggunakake LESS karo Bootstrap

Ngatur lan ngluwihi Bootstrap nganggo LESS , preprocessor CSS, kanggo njupuk kauntungan saka variabel, mixin, lan liyane digunakake kanggo mbangun CSS Bootstrap.

Kenapa KURANG?

Bootstrap digawe nganggo LESS ing inti, basa stylesheet dinamis sing digawe dening kanca apik kita, Alexis Sellier . Iku nggawe CSS basis sistem ngembangaken luwih cepet, luwih gampang, lan luwih nyenengake.

Apa sing kalebu?

Minangka extension saka CSS, LESS kalebu variabel, mixins kanggo reusable snippet kode, operasi kanggo matematika prasaja, nesting, lan malah fungsi werna.

Sinau luwih lengkap

KURANG CSS

Bukak situs web resmi ing http://lesscss.org/ kanggo mangerteni sing luwih lengkap.

Variabel

Ngatur warna lan nilai piksel ing CSS bisa uga rada angel, biasane kebak salinan lan tempel. Ora nganggo KURANG - nemtokake warna utawa nilai piksel minangka variabel lan ganti sapisan.

Campuran

Telu pranyatan radius wewatesan sampeyan kudu nggawe ing CSS biasa? Saiki wis dadi siji baris kanthi bantuan mixin, potongan kode sing bisa digunakake maneh ing ngendi wae.

Operasi

Gawe kothak, pimpinan, lan luwih fleksibel kanthi nindakake matematika kanthi cepet kanthi operasi. Multiply, dibagi, nambah, lan nyuda cara kanggo CSS sanity.

Scaffolding lan pranala

@bodyBackground @white Werna latar mburi kaca
@textColor @grayDark Werna teks standar kanggo kabeh isi, judhul, lan liya-liyane
@linkColor #08c Warna teks pranala standar
@linkColorHover darken(@linkColor, 15%) Warna hover teks pranala standar

Sistem grid

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6,382978723%
@fluidGridGutterWidth 2.127659574%

Tipografi

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

Tabel

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

Werna werna abu-abu

@black #000
@grayDarker #222
@grayDark #333
@gray #555
@grayLight #999
@grayLighter #eee
@white #fff

Warna aksen

@blue #049cdb
@green #46a546
@red #9d261d
@yellow #ffc40d
@orange #f89406
@pink #c3325f
@purple #7a43b6

Komponen

Tombol

@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

Formulir

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

Wangun negara lan tandha

@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

Dropdowns

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

Unit pahlawan

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

About mixins

Campuran dhasar

A mixin dhasar ateges kalebu utawa sebagean kanggo snippet saka CSS. Iki ditulis kaya kelas CSS lan bisa diarani ing ngendi wae.

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

Campuran parametrik

Campuran parametrik kaya mixin dhasar, nanging uga nampa paramèter (mula jenenge) kanthi nilai standar opsional.

  1. . unsur {
  2. . wates - radius ( 4px );
  3. }

Gampang nambah dhewe

Saklawasé kabeh mixin Bootstrap disimpen ing mixins.less, sarana apik .less file sing ngijini sampeyan kanggo nggunakake mixin ing samubarang file .less ing toolkit.

Dadi, go ahead lan nggunakake sing wis ana utawa aran gratis kanggo nambah dhewe minangka sampeyan perlu.

Klebu campuran

Utilitas

Mixin Paramèter Panggunaan
.clearfix() ora ana Tambah menyang sembarang wong tuwa kanggo mbusak floats ing
.tab-focus() ora ana Gunakake gaya fokus Webkit lan bunder Firefox outline
.center-block() ora ana Pusat otomatis unsur pamblokiran-tingkat nggunakakemargin: auto
.ie7-inline-block() ora ana Gunakake saliyane biasa display: inline-blockkanggo njaluk dhukungan IE7
.size() @height @width Cepet nyetel dhuwur lan jembaré ing siji baris
.square() @size Dibangun .size()kanggo nyetel jembar lan dhuwur minangka nilai sing padha
.opacity() @opacity Setel, ing nomer wutuh, persentase opacity (contone, "50" utawa "75")

Formulir

Mixin Paramèter Panggunaan
.placeholder() @color: @placeholderText Setel placeholderwarna teks kanggo input

Tipografi

Mixin Paramèter Panggunaan
#font > #family > .serif() ora ana Nggawe unsur nggunakake tumpukan font serif
#font > #family > .sans-serif() ora ana Nggawe unsur nggunakake tumpukan font sans-serif
#font > #family > .monospace() ora ana Nggawe unsur nggunakake tumpukan font monospace
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Gampang nyetel ukuran font, bobot, lan anjog
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Setel kulawarga font kanggo serif, lan ukuran kontrol, bobot, lan anjog
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Setel kulawarga font kanggo sans-serif, lan ukuran kontrol, bobot, lan anjog
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Setel kulawarga font menyang monospace, lan kontrol ukuran, bobot, lan anjog

Sistem grid

Mixin Paramèter Panggunaan
.container-fixed() ora ana Nggawe wadhah horisontal tengah kanggo nahan konten sampeyan
#grid > .core() @gridColumnWidth, @gridGutterWidth Nggawe sistem kothak piksel (wadhah, baris, lan kolom) kanthi n kolom lan x piksel amba talang
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Ngasilake sistem kothak persen karo n kolom lan x % talang amba
#grid > .input() @gridColumnWidth, @gridGutterWidth Gawe sistem kothak piksel kanggo inputunsur, ngitung padding lan wates
.makeColumn @columns: 1, @offset: 0 Ngowahi sembarang divmenyang kolom kothak tanpa .span*kelas

sifat CSS3

Mixin Paramèter Panggunaan
.border-radius() @radius Babak sudhut unsur. Bisa dadi nilai siji utawa papat nilai sing dipisahake spasi
.box-shadow() @shadow Tambah bayangan gulung menyang unsur
.transition() @transition Tambah efek transisi CSS3 (contone, all .2s linear)
.rotate() @degrees Puter unsur n derajat
.scale() @ratio Skala unsur nganti n kaping ukuran asline
.translate() @x, @y Pindhah unsur ing bidang x lan y
.background-clip() @clip Potong latar mburi unsur (migunani kanggo border-radius)
.background-size() @size Ngontrol ukuran gambar latar mburi liwat CSS3
.box-sizing() @boxmodel Ngganti model kothak kanggo unsur (contone, border-boxkanggo jembar lengkap input)
.user-select() @select Ngontrol pilihan kursor teks ing kaca
.backface-visibility() @visibility: visible Nyegah kedhip konten nalika nggunakake transformasi CSS 3D
.resizable() @direction: both Nggawe unsur apa wae sing bisa diowahi ukurane ing sisih tengen lan ngisor
.content-columns() @columnCount, @columnGap: @gridGutterWidth Nggawe isi unsur apa wae nggunakake kolom CSS3
.hyphens() @mode: auto CSS3 hyphenation nalika sampeyan pengin (kalebu word-wrap: break-word)

Latar mburi lan gradients

Mixin Paramèter Panggunaan
#translucent > .background() @color: @white, @alpha: 1 Menehi unsur warna latar mburi tembus
#translucent > .border() @color: @white, @alpha: 1 Menehi unsur werna wates translucent
#gradient > .vertical() @startColor, @endColor Nggawe gradien latar mburi vertikal lintas-browser
#gradient > .horizontal() @startColor, @endColor Nggawe gradien latar mburi horisontal lintas-browser
#gradient > .directional() @startColor, @endColor, @deg Gawe gradien latar mburi arah lintas-browser
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Gawe gradien latar mburi telu warna lintas-browser
#gradient > .radial() @innerColor, @outerColor Gawe gradien latar mburi radial lintas-browser
#gradient > .striped() @color, @angle Gawe gradien latar mburi belang lintas-browser
#gradientBar() @primaryColor, @secondaryColor Digunakake kanggo tombol kanggo nemtokake wates gradien lan rada peteng
Cathetan: Yen sampeyan ngirim panjaluk tarik menyang GitHub kanthi CSS sing diowahi, sampeyan kudu nglumpukake CSS liwat salah sawijining metode kasebut.

Piranti kanggo kompilasi

Node karo makefile

Instal kompiler baris perintah LESS, JSHint, Recess, lan uglify-js sacara global nganggo npm kanthi nglakokake printah ing ngisor iki:

$ npm install -g kurang jshint recess uglify-js

Sawise diinstal mung mbukak makesaka root direktori bootstrap lan sampeyan wis siap.

Kajaba iku, yen sampeyan wis nginstal watchr , sampeyan bisa mbukak make watchbootstrap kanthi otomatis dibangun maneh saben sampeyan ngowahi file ing lib bootstrap (iki ora dibutuhake, mung cara sing gampang).

baris printah

Instal alat baris perintah LESS liwat Node lan jalanake printah ing ngisor iki:

$ lessc ./less/bootstrap.less > bootstrap.css

Priksa manawa sampeyan kalebu --compressing printah kasebut yen sampeyan nyoba nyimpen sawetara bita!

Javascript

Download Less.js paling anyar lan lebokake path menyang (lan Bootstrap) ing <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>  
 

Kanggo ngumpulake maneh file .kurang, mung simpen lan muat ulang kaca sampeyan. Less.js nglumpukake lan nyimpen ing panyimpenan lokal.

Aplikasi Mac ora resmi

Aplikasi Mac ora resmi nonton direktori file .less lan nglumpukake kode menyang file lokal sawise saben nyimpen file .less sing ditonton.

Yen sampeyan seneng, sampeyan bisa milih pilihan ing app kanggo minifying otomatis lan ing direktori file sing dikompilasi.

Aplikasi Mac liyane

Crunch

Crunch minangka editor lan kompiler KURANG sing apik sing dibangun ing Adobe Air.

KodeKit

Digawe dening wong sing padha karo aplikasi Mac sing ora resmi, CodeKit minangka aplikasi Mac sing nyusun LESS, SASS, Stylus, lan CoffeeScript.

prasaja

Aplikasi Mac, Linux, lan PC kanggo nyeret lan nyelehake file sing KURANG. Kajaba iku, kode sumber ana ing GitHub .