Ngagunakeun LESS kalawan Bootstrap

Sesuaikeun sareng manjangkeun Bootstrap sareng LESS , preprocessor CSS, pikeun ngamangpaatkeun variabel, campuran, sareng seueur deui anu dianggo pikeun ngawangun CSS Bootstrap.

Naha KURANG?

Bootstrap dijieun kalawan KURANG dina inti na, basa stylesheet dinamis dijieun ku sobat alus urang, Alexis Sellier . Éta ngajantenkeun ngembangkeun CSS dumasar sistem langkung gancang, langkung gampang, sareng langkung pikaresepeun.

Naon kaasup?

Salaku penyuluhan CSS, LESS ngawengku variabel, mixins pikeun snippét kode reusable, operasi pikeun matematik basajan, nyarang, komo fungsi warna.

Diajar deui

Nganjang ka ramatloka resmi di http://lesscss.org/ pikeun neuleuman leuwih.

Variabel

Ngatur warna sareng nilai piksel dina CSS tiasa rada nyeri, biasana pinuh ku salinan sareng témpél. Henteu sareng KURANG sanaos-tugaskeun warna atanapi nilai piksel salaku variabel sareng robih sakali.

Campuran

Éta tilu deklarasi wates-radius anu anjeun kedah lakukeun dina CSS biasa? Ayeuna aranjeunna nuju ka hiji garis kalayan bantosan mixins, snippét kode anu anjeun tiasa dianggo deui dimana waé.

Operasi

Jieun grid anjeun, ngarah, sarta leuwih super fléksibel ku ngalakonan math on laleur jeung operasi. Kalikeun, bagikeun, tambahkeun, sareng ngirangan jalan anjeun kana sanity CSS.

Parancah jeung Tumbu

`@bodyBackground`	`@white`	Warna latar halaman
`@textColor`	`@grayDark`	Warna téks standar pikeun sakabéh awak, judul, sareng seueur deui
`@linkColor`	`#08c`	Warna téks link standar
`@linkColorHover`	`darken(@linkColor, 15%)`	Warna hover téks link standar

Sistim 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, Monako, "Kurir Anyar", monospace
`@baseFontSize`	13px	Kudu piksel
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Kudu piksel
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

tabél

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

Warna grayscale

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

Warna aksen

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

Komponén

Kancing

`@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`

Bentuk

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

Bentuk kaayaan sareng panggeuing

`@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`

Ngeunaan mixins

Campuran dasar

A mixin dasar dasarna mangrupa kaasup atawa parsial pikeun snippet of CSS. Éta ditulis sapertos kelas CSS sareng tiasa disebat dimana waé.

. unsur {
  . clearfix ();
}

Campuran paramétrik

Campuran paramétrik sapertos mixin dasar, tapi ogé nampi parameter (ku kituna nami) kalayan nilai standar opsional.

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

Gampang nambahkeun sorangan

Ampir kabéh mixin Bootstrap disimpen dina mixins.less, file .less utiliti anu saé anu ngamungkinkeun anjeun ngagunakeun mixin dina salah sahiji file .less dina toolkit.

Janten, teraskeun sareng paké anu tos aya atanapi ngarasa Luncat pikeun nambihan anjeun nyalira sakumaha anu anjeun peryogikeun.

Kaasup mixins

Utiliti

Mixin	Parameter	Pamakéan
`.clearfix()`	euweuh	Tambahkeun ka indungna mana wae pikeun mupus floats dina
`.tab-focus()`	euweuh	Larapkeun gaya fokus Webkit sareng bunderan Firefox outline
`.center-block()`	euweuh	Otomatis puseur unsur block-tingkat ngagunakeun`margin: auto`
`.ie7-inline-block()`	euweuh	Anggo salian biasa `display: inline-block`pikeun kéngingkeun dukungan IE7
`.size()`	`@height @width`	Setel jangkungna sareng lebar gancang dina hiji garis
`.square()`	`@size`	Diwangun `.size()`pikeun nyetél lebar sareng jangkungna salaku nilai anu sami
`.opacity()`	`@opacity`	Setel, dina jumlah gembleng, persentase opacity (contona, "50" atanapi "75")

Bentuk

Mixin	Parameter	Pamakéan
`.placeholder()`	`@color: @placeholderText`	Setel `placeholder`warna téks pikeun input

Tipografi

Mixin	Parameter	Pamakéan
`#font > #family > .serif()`	euweuh	Jieun unsur ngagunakeun tumpukan font serif
`#font > #family > .sans-serif()`	euweuh	Jieun unsur ngagunakeun tumpukan font sans-serif
`#font > #family > .monospace()`	euweuh	Jieun unsur ngagunakeun tumpukan font monospace
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Gampang nyetél ukuran font, beurat, sareng ngarah
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Setel kulawarga font ka serif, sarta ukuran kontrol, beurat, sarta ngarah
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Setel kulawarga font ka sans-serif, sarta ukuran kontrol, beurat, sarta ngarah
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Setel kulawarga font kana monospace, jeung kontrol ukuran, beurat, jeung ngarah

Sistim grid

Mixin	Parameter	Pamakéan
`.container-fixed()`	euweuh	Jieun wadahna horizontal dipuseurkeun pikeun nahan eusi Anjeun
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Ngahasilkeun sistem grid piksel (wadah, baris, sareng kolom) kalayan n kolom sareng x talang lebar piksel
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Ngahasilkeun sistem grid persén kalawan n kolom jeung x % talang lega
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Ngahasilkeun sistem grid piksel pikeun `input`elemen, akuntansi pikeun padding jeung wates
`.makeColumn`	`@columns: 1, @offset: 0`	Hurungkeun naon waé `div`kana kolom grid tanpa `.span*`kelas

sipat CSS3

Mixin	Parameter	Pamakéan
`.border-radius()`	`@radius`	Babak juru hiji unsur. Bisa jadi hiji nilai tunggal atawa opat spasi-dipisahkeun nilai
`.box-shadow()`	`@shadow`	Tambahkeun bayangan serelek ka unsur
`.transition()`	`@transition`	Tambahkeun pangaruh transisi CSS3 (misalna, `all .2s linear`)
`.rotate()`	`@degrees`	Muterkeun unsur n derajat
`.scale()`	`@ratio`	Skala unsur ka n kali ukuran aslina
`.translate()`	`@x, @y`	Pindahkeun hiji unsur dina pesawat x jeung y
`.background-clip()`	`@clip`	Potong latar hiji unsur (mangpaat pikeun `border-radius`)
`.background-size()`	`@size`	Kontrol ukuran gambar latar ngaliwatan CSS3
`.box-sizing()`	`@boxmodel`	Robah modél kotak pikeun unsur (contona, `border-box`pikeun lebar pinuh `input`)
`.user-select()`	`@select`	Kontrol pilihan kursor téks dina kaca
`.backface-visibility()`	`@visibility: visible`	Nyegah kedip-kedip eusi nalika nganggo CSS 3D transforms
`.resizable()`	`@direction: both`	Jieun elemen naon resizable on katuhu jeung handap
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Jieun eusi sagala unsur ngagunakeun kolom CSS3
`.hyphens()`	`@mode: auto`	CSS3 hyphenation sawaktos Anjeun hoyong eta (kaasup `word-wrap: break-word`)

Latar jeung gradién

Mixin	Parameter	Pamakéan
`#translucent > .background()`	`@color: @white, @alpha: 1`	Masihan hiji unsur warna latar tembus
`#translucent > .border()`	`@color: @white, @alpha: 1`	Masihan hiji unsur warna wates tembus
`#gradient > .vertical()`	`@startColor, @endColor`	Jieun gradién tukang nangtung cross-browser
`#gradient > .horizontal()`	`@startColor, @endColor`	Jieun gradién latar horisontal cross-browser
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Jieun gradién tukang arah cross-browser
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Jieun gradién latar tilu warna cross-browser
`#gradient > .radial()`	`@innerColor, @outerColor`	Jieun gradién latar tukang radial cross-browser
`#gradient > .striped()`	`@color, @angle`	Jieun gradién latar belang cross-browser
`#gradientBar()`	`@primaryColor, @secondaryColor`	Dipaké pikeun tombol napelkeun gradién jeung wates rada darker

Catetan: Upami anjeun ngirimkeun pamundut tarik ka GitHub nganggo CSS anu dirobih, anjeun kedah nyusun ulang CSS nganggo salah sahiji metodeu ieu.

Parabot pikeun nyusun

Node sareng makefile

Pasang kompiler garis paréntah LESS, JSHint, Recess, sareng uglify-js sacara global sareng npm ku ngajalankeun paréntah di handap ieu:

$ npm install -g kirang jshint recess uglify-js

Sakali dipasang ngan ngajalankeun maketina akar diréktori bootstrap anjeun sarta anjeun geus siap.

Salaku tambahan, upami anjeun parantos dipasang watchr , anjeun tiasa ngajalankeun make watchbootstrap otomatis diwangun deui unggal waktos anjeun ngédit file dina lib bootstrap (ieu henteu diperyogikeun, ngan ukur cara anu gampang).

Garis paréntah

Pasang alat garis paréntah LESS via Node sareng jalankeun paréntah di handap ieu:

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

Pastikeun kalebet --compresskana paréntah éta upami anjeun nyobian ngahémat sababaraha bait!

JavaScript

Unduh Less.js panganyarna sareng kalebet jalur ka dinya (sareng Bootstrap) dina file <head>.

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

Pikeun recompile file .less, ngan simpen aranjeunna sarta muatkeun deui kaca anjeun. Less.js compiles aranjeunna sarta nyimpen aranjeunna dina gudang lokal.

Aplikasi Mac teu resmi

Aplikasi Mac teu resmi ningali diréktori file .less sareng nyusun kode kana file lokal saatos unggal nyimpen file .less anu diawaskeun.

Upami anjeun resep, anjeun tiasa ngagentos préferénsi dina aplikasi pikeun ngaminimalkeun otomatis sareng diréktori mana file anu disusun.

Diwangun ku KURANG

Naha KURANG?

Naon kaasup?

Diajar deui

Variabel

Campuran

Operasi

Variabel Bootstrap Variabel KURANG, nilaina, sareng pedoman pamakean

Parancah jeung Tumbu

Sistim grid

Tipografi

tabél

Warna grayscale

Warna aksen

Komponén

Kancing

Bentuk

Bentuk kaayaan sareng panggeuing

Navbar

Dropdowns

Unit pahlawan

Campuran Bootstrap

Ngeunaan mixins

Campuran dasar

Campuran paramétrik

Gampang nambahkeun sorangan

Kaasup mixins

Utiliti

Bentuk

Tipografi

Sistim grid

sipat CSS3

Latar jeung gradién

Nyusun Bootstrap sareng KURANG

Parabot pikeun nyusun

Node sareng makefile

Garis paréntah

JavaScript

Aplikasi Mac teu resmi

Aplikasi Mac langkung seueur

Krérét

CodeKit

Basajan