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.
Construido con MENOS
¿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.
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.
Bootstrap variables LESS variables, sus valores y pautas de uso
hipervínculos
@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 |
60 píxeles |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Tipografía
@baseFontSize |
13 píxeles |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
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
@primaryButtonBackground |
@linkColor |
Formularios
@placeholderText |
@grayLight |
barra de navegación
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Estados de formulario y alertas
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Mezclas de Bootstrap
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 usandomargin: auto |
.ie7-inline-block() |
ninguna | Utilícelo además del habitual display: inline-blockpara obtener compatibilidad con IE7 |
.size() |
@height: 5px, @width: 5px |
Establecer rápidamente la altura y el ancho en una línea |
.square() |
@size: 5px |
Se basa en .size()establecer el ancho y la altura como el mismo valor |
.opacity() |
@opacity: 100 |
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 grilla anterior con n columnas y x % de canaleta de ancho |
Propiedades CSS3
| mezclando | Parámetros | Uso |
|---|---|---|
.border-radius() |
@radius: 5px |
Redondear las esquinas de un elemento. Puede ser un solo valor o cuatro valores separados por espacios |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
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: 0, @y: 0 |
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 |
.resizable() |
@direction: both |
Haz cualquier elemento redimensionable a la derecha e inferior |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Haz que el contenido de cualquier elemento use columnas CSS3 |
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 |
Compilando Bootstrap con LESS
Herramientas para compilar
Nodo con makefile
Instale el compilador de línea de comando LESS y uglify-js globalmente con npm ejecutando el siguiente comando:
$ npm install -g menos 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 ./lib/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 .