Usando LESS con Bootstrap

Personalice y amplíe Bootstrap con LESS , un preprocesador de CSS, para aprovechar las variables, los complementos y más que se utilizan para crear el CSS de Bootstrap.

¿Por qué MENOS?

Bootstrap está hecho con LESS en su núcleo, un lenguaje de hoja de estilo dinámico creado por nuestro buen amigo, Alexis Sellier . Hace que el desarrollo de CSS basado en sistemas sea más rápido, fácil y divertido.

¿Qué está incluido?

Como una extensión de CSS, LESS incluye variables, mixins para fragmentos de código reutilizables, operaciones para matemáticas simples, anidamiento e incluso funciones de color.

Aprende más

MENOS CSS

Visite el sitio web oficial en http://lesscss.org/ para obtener más información.

Variables

Administrar colores y valores de píxeles en CSS puede ser un poco molesto, generalmente lleno de copiar y pegar. Sin embargo, no con MENOS: asigne colores o valores de píxeles como variables y cámbielos una vez.

mezclas

¿Esas tres declaraciones de radio de borde que necesita hacer en CSS normal? Ahora se reducen a una línea con la ayuda de mixins, fragmentos de código que puede reutilizar en cualquier lugar.

Operaciones

Haga que su cuadrícula, líder y más súper flexible haga los cálculos sobre la marcha con operaciones. Multiplique, divida, sume y reste su camino hacia la cordura de CSS.

Andamios y enlaces

@bodyBackground @white Color de fondo de la página
@textColor @grayDark Color de texto predeterminado para todo el cuerpo, encabezados y más
@linkColor #08c Color de texto de enlace predeterminado
@linkColorHover darken(@linkColor, 15%) Color de desplazamiento del texto del vínculo predeterminado

Sistema de red

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@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", monoespacio
@baseFontSize 13px Deben ser píxeles
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Deben ser píxeles
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Mesas

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

Colores en escala de grises

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

colores de acento

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

Componentes

Botones

@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

Estados de formulario y alertas

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

barra de navegación

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

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

unidad de héroe

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Acerca de los mixins

Mezclas basicas

Un mixin básico es esencialmente un include o un parcial para un fragmento de CSS. Están escritos como una clase CSS y se pueden llamar en cualquier lugar.

  1. . elemento {
  2. . arreglo claro ();
  3. }

Mezclas paramétricas

Un mixin paramétrico es como un mixin básico, pero también acepta parámetros (de ahí el nombre) con valores predeterminados opcionales.

  1. . elemento {
  2. . borde - radio ( 4px );
  3. }

Añade fácilmente los tuyos

Casi todos los mixins de Bootstrap se almacenan en mixins.less, un maravilloso archivo .less de utilidad que le permite usar un mixin en cualquiera de los archivos .less del kit de herramientas.

Entonces, continúe y use los existentes o siéntase libre de agregar los suyos propios según lo necesite.

Mezclas incluidas

Utilidades

mezclando Parámetros Uso
.clearfix() ninguna Agregue a cualquier padre para borrar los flotantes dentro
.tab-focus() ninguna Aplique el estilo de enfoque de Webkit y el contorno redondo de Firefox
.center-block() ninguna Centrar automáticamente un elemento a nivel de bloque usandomargin: auto
.ie7-inline-block() ninguna Utilícelo además del habitual display: inline-blockpara obtener compatibilidad con IE7
.size() @height @width Establecer rápidamente la altura y el ancho en una línea
.square() @size Se basa en .size()establecer el ancho y la altura como el mismo valor
.opacity() @opacity Establecer, en números enteros, el porcentaje de opacidad (por ejemplo, "50" o "75")

Formularios

mezclando Parámetros Uso
.placeholder() @color: @placeholderText Establecer el placeholdercolor del texto para las entradas

Tipografía

mezclando Parámetros Uso
#font > #family > .serif() ninguna Hacer que un elemento use una pila de fuentes serif
#font > #family > .sans-serif() ninguna Hacer que un elemento use una pila de fuentes sans-serif
#font > #family > .monospace() ninguna Hacer que un elemento use una pila de fuentes monoespaciadas
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Configure fácilmente el tamaño de fuente, el peso y el interlineado
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Establezca la familia de fuentes en serif y controle el tamaño, el peso y el interlineado
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Configure la familia de fuentes en sans-serif y controle el tamaño, el peso y el interlineado
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Establezca la familia de fuentes en monoespaciado y controle el tamaño, el peso y el interlineado

Sistema de red

mezclando Parámetros Uso
.container-fixed() ninguna Cree un contenedor centrado horizontalmente para guardar su contenido
#grid > .core() @gridColumnWidth, @gridGutterWidth Genere un sistema de cuadrícula de píxeles (contenedor, fila y columnas) con n columnas y un canalón de x píxeles de ancho
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Genere un sistema de cuadrícula porcentual con n columnas y x % de canalón de ancho
#grid > .input() @gridColumnWidth, @gridGutterWidth Genere el sistema de cuadrícula de píxeles para inputelementos, teniendo en cuenta el relleno y los bordes.
.makeColumn @columns: 1, @offset: 0 Convierta cualquiera diven una columna de cuadrícula sin las .span*clases.

Propiedades CSS3

mezclando Parámetros Uso
.border-radius() @radius Redondear las esquinas de un elemento. Puede ser un solo valor o cuatro valores separados por espacios
.box-shadow() @shadow Agregar una sombra paralela a un elemento
.transition() @transition Agregar efecto de transición CSS3 (p. ej., all .2s linear)
.rotate() @degrees Girar un elemento n grados
.scale() @ratio Escalar un elemento a n veces su tamaño original
.translate() @x, @y Mover un elemento en los planos x e y
.background-clip() @clip Recortar el fondo de un elemento (útil para border-radius)
.background-size() @size Controla el tamaño de las imágenes de fondo a través de CSS3
.box-sizing() @boxmodel Cambiar el modelo de caja para un elemento (por ejemplo, border-boxpara un ancho completo input)
.user-select() @select Controlar la selección del cursor de texto en una página
.backface-visibility() @visibility: visible Evite el parpadeo del contenido al usar transformaciones CSS 3D
.resizable() @direction: both Haz cualquier elemento redimensionable a la derecha e inferior
.content-columns() @columnCount, @columnGap: @gridGutterWidth Haz que el contenido de cualquier elemento use columnas CSS3
.hyphens() @mode: auto Separación de sílabas CSS3 cuando lo desee (incluye word-wrap: break-word)

Fondos y degradados

mezclando Parámetros Uso
#translucent > .background() @color: @white, @alpha: 1 Dar a un elemento un color de fondo translúcido
#translucent > .border() @color: @white, @alpha: 1 Dar a un elemento un color de borde translúcido
#gradient > .vertical() @startColor, @endColor Crear un degradado de fondo vertical entre navegadores
#gradient > .horizontal() @startColor, @endColor Crear un degradado de fondo horizontal entre navegadores
#gradient > .directional() @startColor, @endColor, @deg Crear un degradado de fondo direccional entre navegadores
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Crear un degradado de fondo de tres colores entre navegadores
#gradient > .radial() @innerColor, @outerColor Crear un degradado de fondo radial entre navegadores
#gradient > .striped() @color, @angle Crear un degradado de fondo rayado entre navegadores
#gradientBar() @primaryColor, @secondaryColor Usado para botones para asignar un degradado y un borde ligeramente más oscuro
Nota: Si envía una solicitud de extracción a GitHub con CSS modificado, debe volver a compilar el CSS a través de cualquiera de estos métodos.

Herramientas para compilar

Nodo con makefile

Instale el compilador de línea de comandos LESS, JSHint, Recess y uglify-js globalmente con npm ejecutando el siguiente comando:

$ npm install -g menos jshint recreo uglify-js

Una vez instalado, simplemente ejecute makedesde la raíz de su directorio de arranque y ya está todo listo.

Además, si tiene instalado watchr , puede ejecutar make watchpara que bootstrap se reconstruya automáticamente cada vez que edite un archivo en la biblioteca de bootstrap (esto no es obligatorio, solo es un método conveniente).

Línea de comando

Instale la herramienta de línea de comandos LESS a través de Node y ejecute el siguiente comando:

$ menosc ./menos/bootstrap.less > bootstrap.css

¡ Asegúrese de incluir --compressen ese comando si está tratando de guardar algunos bytes!

JavaScript

Descargue el Less.js más reciente e incluya la ruta (y Bootstrap) en el archivo <head>.

<enlace rel = "hoja de estilo/menos" href = "/ruta/a/bootstrap.less" > <script src = "/ruta/a/menos.js" ></script>  
 

Para volver a compilar los archivos .less, simplemente guárdelos y vuelva a cargar su página. Less.js los compila y los almacena en el almacenamiento local.

Aplicación no oficial de Mac

La aplicación no oficial de Mac observa directorios de archivos .less y compila el código en archivos locales después de cada guardado de un archivo .less observado.

Si lo desea, puede alternar las preferencias en la aplicación para la minimización automática y en qué directorio terminan los archivos compilados.

Más aplicaciones Mac

Crujido

Crunch es un editor y compilador LESS de gran apariencia construido en Adobe Air.

Kit de código

Creado por el mismo tipo que la aplicación no oficial de Mac, CodeKit es una aplicación de Mac que compila LESS, SASS, Stylus y CoffeeScript.

Sencillo

Aplicación para Mac, Linux y PC para compilar archivos LESS con arrastrar y soltar. Además, el código fuente está en GitHub .