Usando LESS com o Bootstrap

Customize e extenda o Bootstra com o LESS, um pré-processador CSS, que tira vantagens de variáveis, mixins, e amplamente usado para gerar o CSS do Bootstrap.

Por que LESS?

O Bootstrap foi feito com o LESS desde seu início, uma linguagem de estilos dinâmica criada pelo nosso bom amigo Alexis Sellier. Foi desenvolvido para deixar o CSS mais rápido, mais fácil e mais divertido

O que é incluso?

Como uma extensão do CSS, LESS inclui variáveis, mixins para pedaços reusáveis de código, operações para simples matemática, aninhamento, ou até mesmo função de cores

Aprenda mais

Visite o website oficial em http://lesscss.org para saber mais

Variáveis

Gerenciar valores de cores e pixel no CSS pode ser um pouco doloroso, geralmente fazendo copiar e colar. Não com o LESS que você pode—determinar cores ou pixels como variáveis e mudá-las somente uma vez

Mixins

Aquelas três declarações de border-radius que você precisa para fazer um ol regular no CSS? Agora você pode fazer isto em uma linha com a ajuda de mixins, pedaços de códigos para serem reutilizados em qualquer lugar.

Operações

Faça seu grid, liderando, e super flexível fazendo a matemática em tempo real com operações. Multiplique, divida, adicione, e subtraia da sua maneira que a sanidade do CSS permite

Construção e links

`@bodyBackground`	`@white`	Cor de fundo da página
`@textColor`	`@grayDark`	Cor de texto padrão para o corpo completo, cabeçalho e mais
`@linkColor`	`#08c`	Cor padrão de link de texto
`@linkColorHover`	`darken(@linkColor, 15%)`	Cor padrão de link de texto no estado hover

Sistema de Grid

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

Tipografia

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

Tabelas

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

Cores na escala cinza

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

cores de ênfase

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

Componentes

Botões

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

Formulários

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

Estados de formulários e alertas

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

Barra de navegação

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

Unidade herói

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

Sobre mixins

Mixins básicos

Um mixin básico é essencialmente uma inclusão de um código parcial de CSS. Eles são escritos simplesmente como uma classe CSS pode ser chamada de qualquer lugar

.element {
  .clearfix();
}

mixins com parâmetros

Um mixin parametrizado é simplesmente como um mixin básico, mas também aceita parâmetros com valores padrão opcionais

.element {
  .border-radius(4px);
}

Facilmente adicione o seu

Todos mixins do Bootstrap estão guardados em mixins.less, um arquivo de utilizade .less que permite que você use um mixin em qualquer arquivo .less na ferramenta

Então, vá em frente e use mixings existentes ou sinta-se a vontade para adicionar quando necessário

Mixins inclusos

Utilitários

Mixin	Parâmetros	Uso
`.clearfix()`	none	Adicione qualquer pai para limpar os floats juntos
`.tab-focus()`	none	Aplique o focus no estilo webkit e arredonde o outline do firefox
`.center-block()`	none	Auto centralize um elemento block-level usando `margin:auto`
`.ie7-inline-block()`	none	Adicione o regular `display: inline-block` para dar suporte ao IE7
`.size()`	`@height @width`	Escolha o tamanho da alutra e largura em uma linha
`.square()`	`@size`	Construa um `.size()` para escolher largura e altura de mesmos valores
`.opacity()`	`@opacity`	Escolha, em números inteiros, a percentagem do opacity (e.g., "50" or "75")

Forms

Mixin	Parâmetros	Uso
`.placeholder()`	`@color: @placeholderText`	Escolha a cor do texto de `placeholder` para inputs

Typography

Mixin	Parâmetros	Uso
`#font > #family > .serif()`	none	Faça um elemento usar uma fonte serifada
`#font > #family > .sans-serif()`	none	Faça um elemento usar uma fonte sans-serif
`#font > #family > .monospace()`	none	Faça um elemento usar uma fonte monoespaçada
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Facilmente escolha tamanho e peso
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Escolha font family para serif, e controle tamanho e peso
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Escolha font family para sans-serif, e controle tamanho e peso
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Escolha font family para monospace, e controle tamanho e peso

Grid system

Mixin	Parâmetros	Uso
`.container-fixed()`	none	Cria um container horizontalmente centralizar para abrigar teu conteúdo
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Gera um pixel grid system (container, row e columns) com n colunas e x pixels de gutter
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Gera um sistema de grid em percentagens com n colunas e x % de espaçamento entre colunas
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Gera um sistema de grid em pixal para elementos `input`, contando com padding e bordas
`.makeColumn`	`@columns: 1, @offset: 0`	Transforme qualquer `div` em um grid de coluna sem uma `.span*` classes

Propriedades CSS3

Mixin	Parâmetros	Uso
`.border-radius()`	`@radius`	Arredonde as bordas de um elmento. Isto pode ser feito comum único valor ou um valor separado em quatro valores únicos
`.box-shadow()`	`@shadow`	Adicione uma sombra num elmento
`.transition()`	`@transition`	Adicione uma transição de efeito CSS3 (e.g., `all .2s linear`)
`.rotate()`	`@degrees`	Rotacione um elemento em n graus
`.scale()`	`@ratio`	Escale um elemento em n vezes seu tamanho original
`.translate()`	`@x, @y`	Move um elemento nas cordenadas x e y
`.background-clip()`	`@clip`	Corte o background de um elemento (útil para `border-radius`)
`.background-size()`	`@size`	Controle o tamanho de imagens de background via CSS3
`.box-sizing()`	`@boxmodel`	Muda o box model de um elemento ((e.g., `border-box` ara um `input`) de largura completa)
`.user-select()`	`@select`	Controla a seleção do cursor de um texto na página
`.backface-visibility()`	`@visibility: visible`	Prever um tremido no conteúdo usando transformações CSS em 3D
`.resizable()`	`@direction: both`	Torna qualquer elemento redimensionável da direita para a parte inferior
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Faz o conteúdo virar coluna de qualquer elemento usando CSS3
`.hyphens()`	`@mode: auto`	Hifenização com CSS3 quando você quer (inclui `word-wrap: break-word`)

Fundos e gradientes

Mixin	Parâmetros	Uso
`#translucent > .background()`	`@color: @white, @alpha: 1`	Dá ao elemento uma cor de fundo translúcida
`#translucent > .border()`	`@color: @white, @alpha: 1`	Dá ao elemento uma cor de borda translúcida
`#gradient > .vertical()`	`@startColor, @endColor`	Cria um gradiente vertical cross-browser
`#gradient > .horizontal()`	`@startColor, @endColor`	Cria um gradiente horizontal cross-browser
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Cria um gradiente direcional cross-browser
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Cria um gradiente de três cores cross-browser
`#gradient > .radial()`	`@innerColor, @outerColor`	Cria um gradiente radial cross-browser
`#gradient > .striped()`	`@color, @angle`	Cria um gradiente zebrado cross-browser
`#gradientBar()`	`@primaryColor, @secondaryColor`	Usado para botões para um gradiente levemente com borda mais escura

Nota: Se você está enviando um pull request no Github com CSS modificado, você deve recompilar o CSS por qualquer um destes métodos

Ferramentas para compilar

Node com makefile

Instala uma linha de comando LESS ao compilador, JSHint, Recess, e uglify-js globalmente com npm executando o seguinte comando

$ npm install -g less jshint recess uglify-js

Uma vez instalado execute make da origem do seu diretório bootstrap e você está configurado.

Adicionalemnte, se você tiver um watchr instalado, você pode executar make watch para o bootstrap automaticamente reconstruir cada vez que você edita um arquivo na biblioteca do bootstrap(isto não é obrigatório, é só um método auxiliar)

Linha de comando

Instale a linha de comando LESS via Node e execute o seguinte comando:

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

Tenha certeza de incluir --compress no comando para você economizar alguns bytes!

Javascript

Faça download do último Less.js e inclua o caminho (e o Bootstrap) no <head>.

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

Para recompilar os arquivos .less, simplesmente salve-os e recarregue sua página. Less.js compila e os armazena com armazenamento local

Aplicativo não oficial para Mac

O aplicativo não oficial para Mac detecta diretórios de arquivos .less e compila a cada vez que os arquivos .less são modificados.

Se você quiser, você pode alternar configurações do aplicativo para automaticamente minificar em qual diretório para os arquivos compilados

Construído com o LESS