Usando LESS com Bootstrap

Personalize e estenda o Bootstrap com LESS , um pré-processador CSS, para aproveitar as variáveis, mixins e muito mais usados para construir o CSS do Bootstrap.

Por que MENOS?

Bootstrap é feito com LESS em seu núcleo, uma linguagem de folha de estilo dinâmica criada por nosso bom amigo, Alexis Sellier . Isso torna o desenvolvimento de CSS baseado em sistemas mais rápido, fácil e divertido.

O que está incluído?

Como uma extensão do CSS, o LESS inclui variáveis, mixins para trechos de código reutilizáveis, operações para matemática simples, aninhamento e até funções de cores.

Saber mais

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

Variáveis

Gerenciar cores e valores de pixel em CSS pode ser um pouco trabalhoso, geralmente cheio de copiar e colar. Mas não com MENOS—atribua cores ou valores de pixel como variáveis e altere-os uma vez.

Mixins

Essas três declarações de raio de borda que você precisa fazer em CSS regular? Agora eles estão reduzidos a uma linha com a ajuda de mixins, trechos de código que você pode reutilizar em qualquer lugar.

Operações

Torne sua grade, líder e mais super flexível, fazendo as contas em tempo real com as operações. Multiplique, divida, adicione e subtraia seu caminho para a sanidade CSS.

Andaimes e links

`@bodyBackground`	`@white`	Cor de fundo da página
`@textColor`	`@grayDark`	Cor de texto padrão para todo o corpo, títulos e muito mais
`@linkColor`	`#08c`	Cor do texto do link padrão
`@linkColorHover`	`darken(@linkColor, 15%)`	Cor de foco do texto do link padrão

Sistema de rede

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6,382978723%
`@fluidGridGutterWidth`	2,127659574%

Tipografia

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sem serifa
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Mônaco, "Courier New", monoespaço
`@baseFontSize`	13px	Deve ser pixels
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Deve ser pixels
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tabelas

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

Cores em tons de cinza

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

Cores de destaque

`@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 do formulário e alertas

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87anúncio
`@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`

Listas suspensas

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

Unidade de herói

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

Sobre mixins

Misturas básicas

Um mixin básico é essencialmente uma inclusão ou parcial de um trecho de CSS. Eles são escritos como uma classe CSS e podem ser chamados em qualquer lugar.

. elemento {
  . clearfix ();
}

Mixins paramétricos

Um mixin paramétrico é como um mixin básico, mas também aceita parâmetros (daí o nome) com valores padrão opcionais.

. elemento {
  . raio da borda ( 4px );
}

Adicione facilmente o seu próprio

Quase todos os mixins do Bootstrap são armazenados em mixins.less, um maravilhoso arquivo .less utilitário que permite que você use um mixin em qualquer um dos arquivos .less no kit de ferramentas.

Então, vá em frente e use os existentes ou sinta-se à vontade para adicionar os seus próprios conforme necessário.

Mixins incluídos

Serviços de utilidade pública

Mixin	Parâmetros	Uso
`.clearfix()`	Nenhum	Adicione a qualquer pai para limpar floats dentro
`.tab-focus()`	Nenhum	Aplique o estilo de foco do Webkit e o contorno arredondado do Firefox
`.center-block()`	Nenhum	Centralize automaticamente um elemento de nível de bloco usando`margin: auto`
`.ie7-inline-block()`	Nenhum	Use além do regular `display: inline-block`para obter suporte ao IE7
`.size()`	`@height @width`	Defina rapidamente a altura e a largura em uma linha
`.square()`	`@size`	Baseia- `.size()`se para definir a largura e a altura como o mesmo valor
`.opacity()`	`@opacity`	Defina, em números inteiros, a porcentagem de opacidade (por exemplo, "50" ou "75")

Formulários

Mixin	Parâmetros	Uso
`.placeholder()`	`@color: @placeholderText`	Definir a `placeholder`cor do texto para entradas

Tipografia

Mixin	Parâmetros	Uso
`#font > #family > .serif()`	Nenhum	Faça um elemento usar uma pilha de fontes com serifa
`#font > #family > .sans-serif()`	Nenhum	Faça um elemento usar uma pilha de fontes sans-serif
`#font > #family > .monospace()`	Nenhum	Faça um elemento usar uma pilha de fontes monoespaçadas
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Defina facilmente o tamanho da fonte, peso e entrelinha
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Defina a família de fontes como serifa e controle tamanho, peso e entrelinha
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Defina a família de fontes como sans-serif e controle o tamanho, peso e entrelinha
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Defina a família de fontes como monoespaçada e controle o tamanho, o peso e a entrelinha

Sistema de rede

Mixin	Parâmetros	Uso
`.container-fixed()`	Nenhum	Crie um contêiner centralizado horizontalmente para armazenar seu conteúdo
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Gere um sistema de grade de pixels (contêiner, linha e colunas) com n colunas e x medianiz de largura de pixel
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Gere um sistema de grade de porcentagem com n colunas e x % de largura
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Gere o sistema de grade de pixels para `input`elementos, contabilizando preenchimento e bordas
`.makeColumn`	`@columns: 1, @offset: 0`	Transforme qualquer `div`uma em uma coluna de grade sem as `.span*`classes

Propriedades CSS3

Mixin	Parâmetros	Uso
`.border-radius()`	`@radius`	Arredonde os cantos de um elemento. Pode ser um valor único ou quatro valores separados por espaços
`.box-shadow()`	`@shadow`	Adicionar uma sombra projetada a um elemento
`.transition()`	`@transition`	Adicionar efeito de transição CSS3 (por exemplo, `all .2s linear`)
`.rotate()`	`@degrees`	Girar um elemento n graus
`.scale()`	`@ratio`	Dimensionar um elemento para n vezes seu tamanho original
`.translate()`	`@x, @y`	Mover um elemento nos planos x e y
`.background-clip()`	`@clip`	Cortar o plano de fundo de um elemento (útil para `border-radius`)
`.background-size()`	`@size`	Controle o tamanho das imagens de fundo via CSS3
`.box-sizing()`	`@boxmodel`	Altere o modelo de caixa para um elemento (por exemplo, `border-box`para um full-width `input`)
`.user-select()`	`@select`	Controlar a seleção do cursor de texto em uma página
`.backface-visibility()`	`@visibility: visible`	Evite a cintilação do conteúdo ao usar transformações CSS 3D
`.resizable()`	`@direction: both`	Torne qualquer elemento redimensionável à direita e à parte inferior
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Faça o conteúdo de qualquer elemento usar colunas CSS3
`.hyphens()`	`@mode: auto`	Hifenização CSS3 quando você quiser (inclui `word-wrap: break-word`)

Planos de fundo e gradientes

Mixin	Parâmetros	Uso
`#translucent > .background()`	`@color: @white, @alpha: 1`	Dê a um elemento uma cor de fundo translúcida
`#translucent > .border()`	`@color: @white, @alpha: 1`	Dê a um elemento uma cor de borda translúcida
`#gradient > .vertical()`	`@startColor, @endColor`	Criar um gradiente de plano de fundo vertical entre navegadores
`#gradient > .horizontal()`	`@startColor, @endColor`	Criar um gradiente de plano de fundo horizontal entre navegadores
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Criar um gradiente de plano de fundo direcional entre navegadores
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Criar um gradiente de plano de fundo de três cores entre navegadores
`#gradient > .radial()`	`@innerColor, @outerColor`	Criar um gradiente de fundo radial entre navegadores
`#gradient > .striped()`	`@color, @angle`	Criar um gradiente de plano de fundo listrado entre navegadores
`#gradientBar()`	`@primaryColor, @secondaryColor`	Usado para botões para atribuir um gradiente e uma borda um pouco mais escura

Observação: se você estiver enviando uma solicitação pull ao GitHub com CSS modificado, deverá recompilar o CSS por meio de qualquer um desses métodos.

Ferramentas para compilar

Nó com makefile

Instale o compilador de linha de comando LESS, JSHint, Recess e uglify-js globalmente com npm executando o seguinte comando:

$ npm install -g less jshint recess uglify-js

Uma vez instalado, basta executar makea partir da raiz do seu diretório bootstrap e está tudo pronto.

Além disso, se você tiver o watchr instalado, poderá executar make watchpara que o bootstrap seja reconstruído automaticamente toda vez que editar um arquivo na biblioteca de bootstrap (isso não é necessário, apenas um método de conveniência).

Linha de comando

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

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

Certifique-se de incluir --compressnesse comando se estiver tentando salvar alguns bytes!

Javascript

Baixe o Less.js mais recente e inclua o caminho para ele (e Bootstrap) no arquivo <head>.

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

Para recompilar os arquivos .less, basta salvá-los e recarregar sua página. Less.js os compila e os armazena no armazenamento local.

Aplicativo não oficial para Mac

O aplicativo não oficial para Mac observa diretórios de arquivos .less e compila o código em arquivos locais após cada salvamento de um arquivo .less monitorado.

Se desejar, você pode alternar as preferências no aplicativo para redução automática e em qual diretório os arquivos compilados acabam.

Construído com MENOS

Por que MENOS?

O que está incluído?

Saber mais

Variáveis

Mixins

Operações

Variáveis ​​de bootstrap MENOS variáveis, seus valores e diretrizes de uso

Andaimes e links

Sistema de rede

Tipografia

Tabelas

Cores em tons de cinza

Cores de destaque

Componentes

Botões

Formulários

Estados do formulário e alertas

Barra de navegação

Listas suspensas

Unidade de herói

Mixins de inicialização

Sobre mixins

Misturas básicas

Mixins paramétricos

Adicione facilmente o seu próprio

Mixins incluídos

Serviços de utilidade pública

Formulários

Tipografia

Sistema de rede

Propriedades CSS3

Planos de fundo e gradientes

Compilando Bootstrap com LESS

Ferramentas para compilar

Nó com makefile

Linha de comando

Javascript

Aplicativo não oficial para Mac

Mais aplicativos para Mac

Crunch

CodeKit

Simples

Variáveis de bootstrap MENOS variáveis, seus valores e diretrizes de uso