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

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.

. elemento {
  . arreglo claro ();
}

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.

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

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 usando`margin: auto`
`.ie7-inline-block()`	ninguna	Utilícelo además del habitual `display: inline-block`para 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 `placeholder`color 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 `input`elementos, teniendo en cuenta el relleno y los bordes.
`.makeColumn`	`@columns: 1, @offset: 0`	Convierta cualquiera `div`en 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-box`para 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.

Construido con MENOS

¿Por qué MENOS?

¿Qué está incluido?

Aprende más

Variables

mezclas

Operaciones

Bootstrap variables LESS variables, sus valores y pautas de uso

Andamios y enlaces

Sistema de red

Tipografía

Mesas

Colores en escala de grises

colores de acento

Componentes

Botones

Formularios

Estados de formulario y alertas

barra de navegación

Listas deplegables

unidad de héroe

Mezclas de Bootstrap

Acerca de los mixins

Mezclas basicas

Mezclas paramétricas

Añade fácilmente los tuyos

Mezclas incluidas

Utilidades

Formularios

Tipografía

Sistema de red

Propiedades CSS3

Fondos y degradados

Compilando Bootstrap con LESS

Herramientas para compilar

Nodo con makefile

Línea de comando

JavaScript

Aplicación no oficial de Mac

Más aplicaciones Mac

Crujido

Kit de código

Sencillo