Fa'aaogā LESS ma Bootstrap

Fa'asinomaga ma fa'alautele le Bootstrap ile LESS , o se CSS preprocessor, e fa'aoga lelei ai suiga, fa'afefiloi, ma isi mea fa'aoga e fausia ai le CSS a Bootstrap.

Aisea ua ITIITI?

O le Bootstrap e faia i le LESS i lona autu, o se gagana sitaili malosi na fatuina e la tatou uo lelei, Alexis Sellier . E fa'avavevave, faigofie, ma sili atu ona malie le atina'eina o CSS fa'avae.

O ā mea e aofia ai?

I le avea ai ma faʻaopoopoga o le CSS, LESS e aofia ai fesuiaiga, faʻafefiloi mo snippets toe faʻaaogaina o code, faʻagaioiga mo numera faigofie, ofaga, ma e oʻo lava i galuega lanu.

Aoao atili

Asiasi i le upegatafa'ilagi aloaia ile http://lesscss.org/ e aoao atili.

Fuafuaga

O le fa'atonutonuina o lanu ma fa'ailoga pika i le CSS e mafai ona fai sina tiga, e masani ona tumu i kopi ma faapipii. E le o le LESS e ui lava-tuuina atu lanu poʻo tau pika e fai ma fesuiaiga ma sui tasi.

Mixins

O ta'utinoga na e tolu tuaoi-radius e tatau ona e faia ile CSS masani? O lea ua o'o i lalo i le laina e tasi ma le fesoasoani a mixins, snippets of code e mafai ona e toe fa'aoga i so'o se mea.

Galuega

Fai lau fa'asologa, ta'ita'i, ma sili atu ona fetu'una'i e ala i le faia o le numera i luga o le lele ma fa'agaioiga. Fa'atele, vaevae, fa'aopoopo, ma toesea lau ala ile CSS sanity.

Fa'amanu ma so'oga

`@bodyBackground`	`@white`	lanu pito i tua o itulau
`@textColor`	`@grayDark`	Fa'ailoga lanu o tusitusiga mo le tino atoa, ulutala, ma isi mea
`@linkColor`	`#08c`	Lanu tusitusiga o feso'ota'iga masani
`@linkColorHover`	`darken(@linkColor, 15%)`	Lanu fa'afefe o tusitusiga feso'ota'iga

Faiga fa'apipi'i

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

Tusitala

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

Laupapa

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

Lanu lanu efuefu

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

Fa'ailoga lanu

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

Vaega

Fa'amau

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

Fomu

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

Fa'ailoga tulaga ma fa'aaliga

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

Pa'u i lalo

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

Vaega toa

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

E uiga i mixins

Fa'afefiloi faavae

O se fa'afefiloi fa'avae e matua'i aofia ai po'o se vaega mo se snippet o le CSS. E tusia e pei o se vasega CSS ma e mafai ona valaʻau i soʻo se mea.

. elemene {
  . clearfix ();
}

Fa'afefiloi parametric

O se fa'afefiloiga fa'atutusa e pei lava o se fa'afefiloi fa'avae, ae na te talia fo'i fa'amaufa'ailoga (lea o le igoa) fa'atasi ai ma tau fa'aletonu e filifili ai.

. elemene {
  . tuaoi - radius ( 4px );
}

Fa'aopoopo faigofie lau oe lava

Toeitiiti lava o mea fa'afefiloi uma a Bootstrap o lo'o teuina i mixins.less, o se fa'aoga matagofie .less faila e mafai ai ona e fa'aogaina se mixin i so'o se faila .less i le meafaigaluega.

O lea, alu i luma ma faʻaoga mea o loʻo i ai pe lagona le saoloto e faʻaopoopo lau oe lava pe a manaʻomia.

E aofia ai fa'afefiloi

Utilities

Mixin	Parameter	Fa'aoga
`.clearfix()`	leai se tasi	Fa'aopoopo i so'o se matua e fa'amama fa'a'opeopea i totonu
`.tab-focus()`	leai se tasi	Fa'aoga le sitaili taula'i Webkit ma fa'ata'amilo le fa'asologa o Firefox
`.center-block()`	leai se tasi	Fa'atotonu fa'atotonugalemu se elemene poloka-tulaga fa'aoga`margin: auto`
`.ie7-inline-block()`	leai se tasi	Fa'aoga fa'aopoopo i taimi masani `display: inline-block`e maua ai le lagolago IE7
`.size()`	`@height @width`	Seti vave le maualuga ma le lautele i luga o le laina e tasi
`.square()`	`@size`	Fausia i luga `.size()`e seti le lautele ma le maualuga e tutusa le tau
`.opacity()`	`@opacity`	Seti, i numera atoa, le pasene o le opacity (fa'ata'ita'iga, "50" po'o le "75")

Fomu

Mixin	Parameter	Fa'aoga
`.placeholder()`	`@color: @placeholderText`	Seti le `placeholder`lanu o tusitusiga mo mea e fai

Tusitala

Mixin	Parameter	Fa'aoga
`#font > #family > .serif()`	leai se tasi	Faia se elemene e fa'aaoga ai se fa'aputuga mata'itusi serif
`#font > #family > .sans-serif()`	leai se tasi	Fai se elemene e fa'aaoga ai se fa'aputuga vaitusi sans-serif
`#font > #family > .monospace()`	leai se tasi	Fai se elemene e fa'aaoga ai se fa'aputuga vaitusi monospace
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Fa'afaigofie ona seti le lapo'a, mamafa, ma le ta'ita'iga
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Seti le font family i serif, ma pulea le tele, mamafa, ma le taʻitaʻia
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Seti le font family i le sans-serif, ma pulea le tele, mamafa, ma le taʻitaʻia
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Seti le font family i le monospace, ma pulea le tele, mamafa, ma le taʻitaʻia

Faiga fa'apipi'i

Mixin	Parameter	Fa'aoga
`.container-fixed()`	leai se tasi	Fausia se koneteina fa'afa'afa'atonugalemu mo le fa'amauina o au mea
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Fausia se faiga fa'ata'i pika (koneteina, laina, ma koluma) fa'atasi ai ma n koluma ma x pika lautele alavai.
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Fa'atupuina se fa'asologa fa'asologa fa'atasi ma n koluma ma le x % lautele alavai
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Fausia le pixel grid system mo `input`elemene, faʻamaumauga mo padding ma tuaoi
`.makeColumn`	`@columns: 1, @offset: 0`	Su'e so'o `div`se koluma e aunoa ma `.span*`ni vasega

CSS3 meatotino

Mixin	Parameter	Fa'aoga
`.border-radius()`	`@radius`	Fa'ata'amilo tulimanu o se elemene. E mafai ona avea ma se tau e tasi pe fa avanoa vaeluaga
`.box-shadow()`	`@shadow`	Fa'aopoopo se ata lafoia i se elemene
`.transition()`	`@transition`	Fa'aopoopo le CSS3 fa'agasologa o suiga (fa'ata'ita'iga, `all .2s linear`)
`.rotate()`	`@degrees`	Su'e se elemene n tikeri
`.scale()`	`@ratio`	Fa'afua se elemene i le n taimi lona tele muamua
`.translate()`	`@x, @y`	Fa'agaoioi se elemene i le x ma le y vaalele
`.background-clip()`	`@clip`	Oti le pito i tua o se elemene (aoga mo `border-radius`)
`.background-size()`	`@size`	Pulea le tele o ata pito i tua e ala i le CSS3
`.box-sizing()`	`@boxmodel`	Suia le faʻataʻitaʻiga pusa mo se elemene (faʻataʻitaʻiga, `border-box`mo le lautele lautele `input`)
`.user-select()`	`@select`	Pulea le filifiliga o le fa'ailo o tusitusiga i luga o se itulau
`.backface-visibility()`	`@visibility: visible`	Taofi le emo o mataupu pe a faʻaogaina le CSS 3D suiga
`.resizable()`	`@direction: both`	Fai so'o se elemene e mafai ona sui i le taumatau ma le pito i lalo
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Fa'aoga mea o so'o se elemene e fa'aoga ai koluma CSS3
`.hyphens()`	`@mode: auto`	CSS3 hyphenation pe a e mana'o iai (e aofia ai `word-wrap: break-word`)

Tala'aga ma fa'agasolo

Mixin	Parameter	Fa'aoga
`#translucent > .background()`	`@color: @white, @alpha: 1`	Tu'u i se elemene se lanu felanulanua'i
`#translucent > .border()`	`@color: @white, @alpha: 1`	Tu'u i se elemene se lanu felanulanua'i o tuaoi
`#gradient > .vertical()`	`@startColor, @endColor`	Fausia se koluse su'esu'e fa'asa'o fa'ala'au fa'amasani
`#gradient > .horizontal()`	`@startColor, @endColor`	Fausia se kolosi su'esu'e fa'ata'amilo fa'ala'au fa'ala'au fa'ala'au
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Fausia se fa'ase'e fa'asinoala i tua
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Fausia se koluse su'esu'e e tolu-lanu fa'amasani pito i tua
`#gradient > .radial()`	`@innerColor, @outerColor`	Fausia se fa'ase'e fa'aala'au fa'a'ala'au fa'a'ala'au su'esu'e
`#gradient > .striped()`	`@color, @angle`	Fausia se koluse su'e su'esu'e fa'asolo fa'a'ala'au fa'amasani
`#gradientBar()`	`@primaryColor, @secondaryColor`	Fa'aoga mo fa'amau e tu'u ai se tuaoi fa'alili ma teisi pogisa

Fa'aaliga: Afai o lo'o e tu'uina atu se talosaga toso ile GitHub fa'atasi ai ma le CSS ua suia, e tatau ona e toe fa'aopoopo le CSS e ala i so'o se tasi o nei metotia.

Meafaigaluega mo le tuufaatasia

Node ma makefile

Faʻapipiʻi le LESS command line compiler, JSHint, Recess, ma uglify-js i le lalolagi atoa ma le npm e ala i le faʻatinoina o le poloaiga lenei:

$ npm faʻapipiʻi -g less jshint recess uglify-js

A mae'a fa'apipi'i na'o le tamo'e makemai le a'a o lau bootstrap directory ma ua e seti uma.

E le gata i lea, afai o loʻo e faʻapipiʻi le vaʻavaʻai , e mafai ona e tamoe make watche toe fausia otometi le bootstrap i taimi uma e te faʻasaʻo ai se faila i le bootstrap lib (e le manaʻomia, naʻo se auala faigofie).

Laina fa'atonu

Faʻapipiʻi le LESS command line tool e ala i le Node ma faʻatautaia le poloaiga lenei:

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

Ia mautinoa e aofia --compressi lena poloaiga pe afai o loʻo e taumafai e faʻasaoina ni paita!

Javascript

Sii mai le Less.js lata mai ma aofia ai le ala i ai (ma Bootstrap) i le <head>.

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

Ina ia toe fa'aopoopo faila .less, na'o le fa'asaoina ma toe uta lau itulau. Less.js e tu'ufa'atasia ma teu i totonu o le fale teu oloa.

Le'o aloaia Mac app

O le Mac app e le'o aloaia e mata'ituina fa'atonuga o faila .less ma tu'ufa'atasia le code i faila fa'apitonu'u pe a mae'a fa'asaoina uma se faila .less mata'ituina.

Afai e te manaʻo ai, e mafai ona e fesuiaʻi mea e te manaʻo i ai i totonu o le app mo le faʻaitiitia otometi ma poʻo fea le lisi o faila tuʻufaʻatasia e iʻu i totonu.

Fausia ile LESS

Aisea ua ITIITI?

O ā mea e aofia ai?

Aoao atili

Fuafuaga

Mixins

Galuega

Su'esu'ega Bootstrap FUA'U'U'U'U'U LAVA, o latou tau, ma ta'iala fa'aoga

Fa'amanu ma so'oga

Faiga fa'apipi'i

Tusitala

Laupapa

Lanu lanu efuefu

Fa'ailoga lanu

Vaega

Fa'amau

Fomu

Fa'ailoga tulaga ma fa'aaliga

Navbar

Pa'u i lalo

Vaega toa

Bootstrap mixins

E uiga i mixins

Fa'afefiloi faavae

Fa'afefiloi parametric

Fa'aopoopo faigofie lau oe lava

E aofia ai fa'afefiloi

Utilities

Fomu

Tusitala

Faiga fa'apipi'i

CSS3 meatotino

Tala'aga ma fa'agasolo

Tu'ufa'atasia o Bootstrap ma LESS

Meafaigaluega mo le tuufaatasia

Node ma makefile

Laina fa'atonu

Javascript

Le'o aloaia Mac app

Tele polokalame Mac

Crunch

CodeKit

Faigofie