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

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.

. elemento {
  . clearfix ();
}

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.

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

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 usando`margin: auto`
`.ie7-inline-block()`	ningún	Use ademais do habitual `display: inline-block`para 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 `placeholder`cor 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 `input`elementos, tendo en conta o recheo e os bordos
`.makeColumn`	`@columns: 1, @offset: 0`	Converte calquera `div`nunha 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-box`para 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.

Construído con MENOS

Por que MENOS?

Que está incluído?

Aprender máis

Variables

Mixins

Operacións

Variables de arranque Variables LESS, os seus valores e pautas de uso

Estadas e enlaces

Sistema de reixa

Tipografía

Táboas

Cores en escala de grises

Cores de acento

Compoñentes

Botóns

Formularios

Formular estados e alertas

Barra de navegación

Despregables

Unidade heroe

Mixins de arranque

Sobre os mixins

Mixins básicos

Mixins paramétricos

Engade facilmente o teu

Mixins incluídos

Utilidades

Formularios

Tipografía

Sistema de reixa

Propiedades CSS3

Fondos e degradados

Compilando Bootstrap con LESS

Ferramentas para compilar

Nodo con makefile

Liña de comandos

Javascript

Aplicación non oficial para Mac

Máis aplicacións para Mac

Crunch

CodeKit

Sinxelo