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.
Construído com MENOS
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.
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.
Variáveis de bootstrap MENOS variáveis, seus valores e diretrizes de uso
Hiperlinks
@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
@baseFontSize |
13px | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18px |
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
@primaryButtonBackground |
@linkColor |
Formulários
@placeholderText |
@grayLight |
Barra de navegação
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Estados do formulário e alertas
@warningText |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87anúncio | |
@infoBackground |
#d9edf7 |
Mixins de inicialização
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 {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 {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 usandomargin: auto |
.ie7-inline-block() |
Nenhum | Use além do regular display: inline-blockpara obter suporte ao IE7 |
.size() |
@height: 5px, @width: 5px |
Defina rapidamente a altura e a largura em uma linha |
.square() |
@size: 5px |
Baseia- .size()se para definir a largura e a altura como o mesmo valor |
.opacity() |
@opacity: 100 |
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 placeholdercor 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 | Forneça um contêiner de largura fixa (definido com @siteWidth) para armazenar seu conteúdo |
.columns() |
@columns: 1 |
Construir uma coluna de grade que abrange qualquer número de colunas (o padrão é 1 coluna) |
.offset() |
@columns: 1 |
Deslocar uma coluna de grade com margem esquerda que abrange qualquer número de colunas |
.gridColumn() |
Nenhum | Faça um elemento flutuar como uma coluna de grade |
Propriedades CSS3
| Mixin | Parâmetros | Uso |
|---|---|---|
.border-radius() |
@radius: 5px |
Arredonde os cantos de um elemento. Pode ser um valor único ou quatro valores separados por espaços |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
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: 0, @y: 0 |
Mover um elemento nos planos x e y |
.background-clip() |
@clip |
Cortar o backgroud 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-boxpara um full-width input) |
.user-select() |
@select |
Controlar a seleção do cursor de texto em uma página |
.resizable() |
@direction: both |
Torne qualquer elemento redimensionável à direita e à parte inferior |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Faça o conteúdo de qualquer elemento usar colunas CSS3 |
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 |
Compilando Bootstrap com LESS
Ferramentas para compilar
Nó com makefile
Instale o compilador de linha de comando LESS com npm executando o seguinte comando:
$ npm instalar menos
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 ./lib/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"> rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src="/path/to/less.js"></script><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.
Mais aplicativos para Mac
Crunch
Crunch é um editor e compilador MENOS de ótima aparência, construído no Adobe Air.
CodeKit
Criado pelo mesmo cara que o aplicativo não oficial para Mac, o CodeKit é um aplicativo para Mac que compila LESS, SASS, Stylus e CoffeeScript.
Simples
Aplicativo para Mac, Linux e PC para compilação de arrastar e soltar de MENOS arquivos. Além disso, o código-fonte está no GitHub .