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.
Fausia ile LESS
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'atosina vave, 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.
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.
Su'esu'ega Bootstrap FUA'U'U'U'U'U LAVA, o latou tau, ma ta'iala fa'aoga
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 |
Fa'atonu faiga
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Tusitusi
@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 |
Vaega toa
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
Bootstrap mixins
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'aparamita 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.
- . 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 e 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'aogamargin: auto |
.ie7-inline-block() |
leai se tasi | Fa'aoga fa'aopoopo i taimi masani display: inline-blocke 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 placeholderlanu o tusitusiga mo mea e fai |
Tusitusi
| Mixin | Parameter | Fa'aoga |
|---|---|---|
#font > #family > .serif() |
leai se tasi | Fai 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 |
Fa'atonu faiga
| 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 |
Fausia se faiga fa'ata'ita'i muamua ma n koluma ma x % lautele alavai |
#grid > .input() |
@gridColumnWidth, @gridGutterWidth |
Fausia le pixel grid system mo inputelemene, faʻamaumauga mo padding ma tuaoi |
.makeColumn |
@columns: 1, @offset: 0 |
Su'e so'o divse 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 poʻo se 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-boxmo 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 |
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 |
Tu'ufa'atasia o Bootstrap ma LESS
Meafaigaluega mo le tuufaatasia
Node ma makefile
Faʻapipiʻi le LESS command line compiler 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 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 meafaigaluega laina laina 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 lē 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 faʻamutaina i totonu.
Tele polokalame Mac
Crunch
O le Crunch o se fa'atonu sili ona lelei LESS ma fa'apipi'i fausia ile Adobe Air.
CodeKit
Faia e le tagata lava e tasi e pei o le Mac app le aloaia, CodeKit o se Mac app e tuufaatasia LESS, SASS, Stylus, ma CoffeeScript.
Faigofie
Mac, Linux, ma le PC app mo le toso ma le pa'u le tuufaatasia o faila LESS. Ma le isi, o le source code o loʻo i luga ole GitHub .