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

LITI CSS

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.

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

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.

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

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'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

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 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 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-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
.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.

Tele polokalame Mac

Crunch

O le Crunch o se fa'atonu sili ona lelei LESS ma fa'apipi'i na 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 tosoina ma le pa'u o le tuufaatasia o faila LESS. Ma le isi, o le source code o loʻo i luga ole GitHub .