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

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.

. unsur {
  . clearfix ();
}

Campuran parametrik

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

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

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 nggunakake`margin: auto`
`.ie7-inline-block()`	ora ana	Gunakake saliyane biasa `display: inline-block`kanggo 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 `placeholder`warna 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 `input`unsur, ngitung padding lan wates
`.makeColumn`	`@columns: 1, @offset: 0`	Ngowahi sembarang `div`menyang 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-box`kanggo 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.

Dibangun karo LESS

Kenapa KURANG?

Apa sing kalebu?

Sinau luwih lengkap

Variabel

Campuran

Operasi

Variabel Bootstrap Variabel KURANG, nilai, lan pedoman panggunaan

Scaffolding lan pranala

Sistem grid

Tipografi

Tabel

Werna werna abu-abu

Warna aksen

Komponen

Tombol

Formulir

Wangun negara lan tandha

Navbar

Dropdowns

Unit pahlawan

Campuran Bootstrap

About mixins

Campuran dhasar

Campuran parametrik

Gampang nambah dhewe

Klebu campuran

Utilitas

Formulir

Tipografi

Sistem grid

sifat CSS3

Latar mburi lan gradients

Nglumpukake Bootstrap karo LESS

Piranti kanggo kompilasi

Node karo makefile

baris printah

Javascript

Aplikasi Mac ora resmi

Aplikasi Mac liyane

Crunch

KodeKit

prasaja