Usando LESS con Bootstrap

Personaliza e estende Bootstrap con LESS , un preprocesador CSS, para aproveitar as variables, mixins e máis que se usan para construír o CSS de Bootstrap.

Por que MENOS?

Bootstrap está feito con LESS no seu núcleo, unha linguaxe de follas de estilo dinámica creada polo noso bo amigo, Alexis Sellier . Fai que o desenvolvemento de CSS baseado en sistemas sexa máis rápido, sinxelo e divertido.

Que está incluído?

Como extensión de CSS, LESS inclúe variables, mesturas para fragmentos de código reutilizables, operacións para matemáticas sinxelas, anidamento e ata funcións de cor.

Aprender máis

MENOS CSS

Visita o sitio web oficial en http://lesscss.org/ para obter máis información.

Variables

Xestionar cores e valores de píxeles en CSS pode ser un pouco complicado, normalmente cheo de copiar e pegar. Pero non con MENOS: asigna cores ou valores de píxeles como variables e cámbiaos unha vez.

Mixins

Esas tres declaracións de radio de fronteira que cómpre facer no CSS normal? Agora están reducidos a unha liña coa axuda de mixins, fragmentos de código que podes reutilizar en calquera lugar.

Operacións

Fai a túa grella, líder e máis flexible facendo as matemáticas sobre a marcha con operacións. Multiplica, divide, suma e resta o teu camiño cara á cordura CSS.

Estadas e enlaces

@bodyBackground @white Cor de fondo da páxina
@textColor @grayDark Cor de texto predeterminada para todo o corpo, títulos e moito máis
@linkColor #08c Cor do texto da ligazón predeterminada
@linkColorHover darken(@linkColor, 15%) Cor predeterminada do texto da ligazón

Sistema de reixa

@gridColumns 12
@gridColumnWidth 60 píxeles
@gridGutterWidth 20 píxeles
@fluidGridColumnWidth 6,382978723 %
@fluidGridGutterWidth 2,127659574 %

Tipografía

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Mónaco, "Courier New", monoespazo
@baseFontSize 13 px Deben ser píxeles
@baseFontFamily @sansFontFamily
@baseLineHeight 18 píxeles Deben ser píxeles
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Táboas

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

Cores en escala de grises

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

Cores de acento

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

Compoñentes

Botóns

@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

Formularios

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

Formular estados e alertas

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

Barra de navegación

@navbarHeight 40 píxeles
@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

Despregables

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

Unidade heroe

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Sobre os mixins

Mixins básicos

Unha mestura básica é esencialmente unha inclusión ou un parcial para un fragmento de CSS. Están escritos como unha clase CSS e pódense chamar en calquera lugar.

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

Mixins paramétricos

Un mixin paramétrico é igual que un mixin básico, pero tamén acepta parámetros (de aí o nome) con valores predeterminados opcionais.

  1. . elemento {
  2. . bordo - raio ( 4px );
  3. }

Engade facilmente o teu

Case todos os mixins de Bootstrap almacénanse en mixins.less, un ficheiro .less de utilidade marabilloso que che permite usar un mixin en calquera dos ficheiros .less do kit de ferramentas.

Entón, vai adiante e utiliza os existentes ou non dubides en engadir o teu segundo o precises.

Mixins incluídos

Utilidades

Mixin Parámetros Uso
.clearfix() ningún Engade a calquera pai para limpar os flotadores dentro
.tab-focus() ningún Aplica o estilo de enfoque de Webkit e redondea o contorno de Firefox
.center-block() ningún Centrar automaticamente un elemento a nivel de bloque usandomargin: auto
.ie7-inline-block() ningún Use ademais do habitual display: inline-blockpara obter soporte para IE7
.size() @height @width Establece rapidamente a altura e o ancho nunha soa liña
.square() @size Constrúese .size()para establecer o ancho e o alto co mesmo valor
.opacity() @opacity Establece, en números enteiros, a porcentaxe de opacidade (por exemplo, "50" ou "75")

Formularios

Mixin Parámetros Uso
.placeholder() @color: @placeholderText Establece a placeholdercor do texto para as entradas

Tipografía

Mixin Parámetros Uso
#font > #family > .serif() ningún Fai que un elemento use unha pila de fontes serif
#font > #family > .sans-serif() ningún Fai que un elemento use unha pila de fontes sans-serif
#font > #family > .monospace() ningún Fai que un elemento use unha pila de fontes monoespazo
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Establece facilmente o tamaño da fonte, o peso e o interlineado
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Establece a familia de fontes como serif e controla o tamaño, o peso e o interlineado
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Establece a familia de fontes en sans-serif e controla o tamaño, o peso e o interlineado
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Establece a familia de fontes en monoespazo e controla o tamaño, o peso e o interlineado

Sistema de reixa

Mixin Parámetros Uso
.container-fixed() ningún Crea un recipiente centrado horizontalmente para gardar o teu contido
#grid > .core() @gridColumnWidth, @gridGutterWidth Xera un sistema de cuadrícula de píxeles (contedor, fila e columnas) con n columnas e canaleta de x píxeles de ancho
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Xera un sistema de cuadrícula porcentual con n columnas e cuneta de x % de ancho
#grid > .input() @gridColumnWidth, @gridGutterWidth Xera o sistema de cuadrícula de píxeles para os inputelementos, tendo en conta o recheo e os bordos
.makeColumn @columns: 1, @offset: 0 Converte calquera divnunha columna de grade sen as .span*clases

Propiedades CSS3

Mixin Parámetros Uso
.border-radius() @radius Redondear as esquinas dun elemento. Pode ser un único valor ou catro valores separados por espazos
.box-shadow() @shadow Engade unha sombra paralela a un elemento
.transition() @transition Engadir efecto de transición CSS3 (por exemplo, all .2s linear)
.rotate() @degrees Xira un elemento n graos
.scale() @ratio Escala un elemento a n veces o seu tamaño orixinal
.translate() @x, @y Move un elemento nos planos x e y
.background-clip() @clip Recortar o fondo dun elemento (útil para border-radius)
.background-size() @size Controla o tamaño das imaxes de fondo mediante CSS3
.box-sizing() @boxmodel Cambia o modelo de caixa para un elemento (por exemplo, border-boxpara un ancho completo input)
.user-select() @select Controla a selección do cursor de texto nunha páxina
.backface-visibility() @visibility: visible Evita o parpadeo do contido ao usar transformacións CSS 3D
.resizable() @direction: both Fai que calquera elemento sexa redimensionable á dereita e á parte inferior
.content-columns() @columnCount, @columnGap: @gridGutterWidth Fai que o contido de calquera elemento use columnas CSS3
.hyphens() @mode: auto Guionización CSS3 cando queiras (inclúe word-wrap: break-word)

Fondos e degradados

Mixin Parámetros Uso
#translucent > .background() @color: @white, @alpha: 1 Dálle a un elemento unha cor de fondo translúcida
#translucent > .border() @color: @white, @alpha: 1 Dálle a un elemento unha cor de bordo translúcida
#gradient > .vertical() @startColor, @endColor Crea un degradado de fondo vertical entre navegadores
#gradient > .horizontal() @startColor, @endColor Crea un degradado de fondo horizontal entre navegadores
#gradient > .directional() @startColor, @endColor, @deg Crea un degradado de fondo direccional entre navegadores
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Crea un degradado de fondo de tres cores para o navegador cruzado
#gradient > .radial() @innerColor, @outerColor Crea un degradado radial de fondo entre navegadores
#gradient > .striped() @color, @angle Crea un degradado de fondo con raias entre navegadores
#gradientBar() @primaryColor, @secondaryColor Úsase para os botóns para asignar un gradiente e un bordo lixeiramente máis escuro
Nota: se estás a enviar unha solicitude de extracción a GitHub con CSS modificado, debes recompilar o CSS mediante calquera destes métodos.

Ferramentas para compilar

Nodo con makefile

Instale o compilador de liña de comandos LESS, JSHint, Recess e uglify-js globalmente con npm executando o seguinte comando:

$npm install -g menos jshint recess uglify-js

Unha vez instalado, só tes que executar makedesde a raíz do teu directorio de arranque e xa está todo listo.

Ademais, se tes watchr instalado, podes executar make watchpara que o bootstrap se reconstruya automaticamente cada vez que edites un ficheiro na biblioteca de bootstrap (isto non é necesario, só é un método práctico).

Liña de comandos

Instale a ferramenta de liña de comandos LESS mediante Node e execute o seguinte comando:

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

Asegúrate de incluír --compressnese comando se estás tentando gardar algúns bytes!

Javascript

Descarga o Less.js máis recente e inclúe o camiño (e Bootstrap) no ficheiro <head>.

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

Para recompilar os ficheiros .less, só tes que gardalos e volver cargar a túa páxina. Less.js compílaos e gárdaos no almacenamento local.

Aplicación non oficial para Mac

A aplicación non oficial para Mac mira directorios de ficheiros .less e compila o código en ficheiros locais despois de cada gardado dun ficheiro .less observado.

Se queres, podes cambiar as preferencias na aplicación para a minificación automática e en que directorio acaban os ficheiros compilados.

Máis aplicacións para Mac

Crunch

Crunch é un excelente editor e compilador LESS construído en Adobe Air.

CodeKit

Creado polo mesmo tipo que a aplicación non oficial para Mac, CodeKit é unha aplicación para Mac que compila LESS, SASS, Stylus e CoffeeScript.

Sinxelo

Aplicación para Mac, Linux e PC para arrastrar e soltar a compilación de MENOS ficheiros. Ademais, o código fonte está en GitHub .