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

MENOS CSS

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.

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

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.

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

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 @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 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 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 inputelementos, contabilizando preenchimento e bordas
.makeColumn @columns: 1, @offset: 0 Transforme qualquer divuma 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-boxpara 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.

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 .