Utilitzant LESS amb Bootstrap

Personalitzeu i amplieu Bootstrap amb LESS , un preprocessador CSS, per aprofitar les variables, mixins i més que s'utilitzen per crear el CSS de Bootstrap.

Per què MENYS?

Bootstrap està fet amb LESS en el seu nucli, un llenguatge de full d'estil dinàmic creat pel nostre bon amic, Alexis Sellier . Fa que el desenvolupament de CSS basat en sistemes sigui més ràpid, fàcil i divertit.

Què inclou?

Com a extensió de CSS, LESS inclou variables, mixins per a fragments de codi reutilitzables, operacions per a matemàtiques simples, nidificació i fins i tot funcions de color.

Aprèn més

Visiteu el lloc web oficial a http://lesscss.org/ per obtenir més informació.

Les variables

Gestionar els colors i els valors de píxels en CSS pot ser una mica complicat, normalment ple de copiar i enganxar. Tanmateix, no amb LESS: assigneu colors o valors de píxels com a variables i canvieu-los una vegada.

Mixins

Aquestes tres declaracions de radi de frontera que heu de fer en CSS normal? Ara es redueixen a una línia amb l'ajuda de mixins, fragments de codi que podeu reutilitzar a qualsevol lloc.

Operacions

Feu que la vostra quadrícula, líder i més flexible sigui més fàcil fent les matemàtiques sobre la marxa amb operacions. Multipliqueu, dividiu, sumeu i resteu el vostre camí cap a la seny CSS.

Hiperenllaços

`@linkColor`	#08c	Color del text de l'enllaç predeterminat
`@linkColorHover`	`darken(@linkColor, 15%)`	Color predeterminat del text de l'enllaç

Sistema de graella

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

Tipografia

`@baseFontSize`	13 píxels
`@baseFontFamily`	`"Helvetica Neue", Helvetica, Arial, sans-serif`
`@baseLineHeight`	18 píxels

Colors en escala de grisos

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

Colors d'accent

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

Components

Botons

`@primaryButtonBackground`	`@linkColor`

Formes

`@placeholderText`	`@grayLight`

Barra de navegació

`@navbarHeight`	40 píxels
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`

Formulari d'estats i alertes

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

Sobre els mixins

Mixins bàsics

Un mixin bàsic és essencialment una inclusió o un parcial per a un fragment de CSS. S'escriuen com una classe CSS i es poden cridar a qualsevol lloc.

. element {
  . clearfix ();
}

Mixines paramètriques

Un mixin paramètric és com un mixin bàsic, però també accepta paràmetres (d'aquí el nom) amb valors predeterminats opcionals.

. element {
  . vora - radi ( 4px );
}

Afegeix fàcilment el teu

Gairebé tots els mixins de Bootstrap s'emmagatzemen a mixins.less, un fitxer .less d'utilitat meravellosa que us permet utilitzar un mixin en qualsevol dels fitxers .less del conjunt d'eines.

Per tant, seguiu endavant i utilitzeu els existents o no dubteu a afegir-ne els vostres segons necessiteu.

Mixins inclosos

Utilitats

Mixin	Paràmetres	Ús
`.clearfix()`	cap	Afegeix a qualsevol pare per netejar els flotadors dins
`.tab-focus()`	cap	Apliqueu l'estil de focus Webkit i el contorn rodó de Firefox
`.center-block()`	cap	Centra automàticament un element a nivell de bloc utilitzant`margin: auto`
`.ie7-inline-block()`	cap	Utilitzeu-lo a més del normal `display: inline-block`per obtenir suport IE7
`.size()`	`@height: 5px, @width: 5px`	Estableix ràpidament l'alçada i l'amplada en una línia
`.square()`	`@size: 5px`	Es basa `.size()`per establir l'amplada i l'alçada amb el mateix valor
`.opacity()`	`@opacity: 100`	Estableix, en nombres sencers, el percentatge d'opacitat (p. ex., "50" o "75")

Formes

Mixin	Paràmetres	Ús
`.placeholder()`	`@color: @placeholderText`	Estableix el `placeholder`color del text per a les entrades

Tipografia

Mixin	Paràmetres	Ús
`#font > #family > .serif()`	cap	Feu que un element utilitzi una pila de fonts serif
`#font > #family > .sans-serif()`	cap	Feu que un element utilitzi una pila de tipus de lletra sans-serif
`#font > #family > .monospace()`	cap	Feu que un element utilitzi una pila de tipus de lletra monoespai
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Estableix fàcilment la mida de la lletra, el pes i l'interlineat
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Estableix la família de tipus de lletra com a serif i controla la mida, el pes i l'interlineat
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Estableix la família de tipus de lletra en sans-serif i controla la mida, el pes i l'interlineat
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Estableix la família de tipus de lletra en monoespai i controla la mida, el pes i l'interlineat

Sistema de graella

Mixin	Paràmetres	Ús
`.container-fixed()`	cap	Creeu un contenidor centrat horitzontalment per contenir el vostre contingut
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Genereu un sistema de quadrícula de píxels (contenidor, fila i columnes) amb n columnes i canal d'amplada de x píxels
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Genereu un sistema de quadrícula precent amb n columnes i canaló d'ample x %

Propietats CSS3

Mixin	Paràmetres	Ús
`.border-radius()`	`@radius: 5px`	Arrodoneix les cantonades d'un element. Pot ser un valor únic o quatre valors separats per espais
`.box-shadow()`	`@shadow: 0 1px 3px rgba(0,0,0,.25)`	Afegiu una ombra a un element
`.transition()`	`@transition`	Afegeix un efecte de transició CSS3 (p. ex., `all .2s linear`)
`.rotate()`	`@degrees`	Gira un element n graus
`.scale()`	`@ratio`	Escala un element a n vegades la seva mida original
`.translate()`	`@x: 0, @y: 0`	Moveu un element als plans x i y
`.background-clip()`	`@clip`	Retalla el fons d'un element (útil per a `border-radius`)
`.background-size()`	`@size`	Controleu la mida de les imatges de fons mitjançant CSS3
`.box-sizing()`	`@boxmodel`	Canviar el model de caixa per a un element (p. ex., `border-box`per a una amplada completa `input`)
`.user-select()`	`@select`	Controla la selecció de text amb el cursor en una pàgina
`.resizable()`	`@direction: both`	Feu que qualsevol element es pugui redimensionar a la dreta i a la part inferior
`.content-columns()`	`@columnCount, @columnGap: @gridColumnGutter`	Feu que el contingut de qualsevol element utilitzi columnes CSS3

Fons i degradats

Mixin	Paràmetres	Ús
`#translucent > .background()`	`@color: @white, @alpha: 1`	Doneu a un element un color de fons translúcid
`#translucent > .border()`	`@color: @white, @alpha: 1`	Doneu a un element un color de vora translúcid
`#gradient > .vertical()`	`@startColor, @endColor`	Creeu un degradat de fons vertical entre navegadors
`#gradient > .horizontal()`	`@startColor, @endColor`	Creeu un degradat de fons horitzontal entre navegadors
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Creeu un degradat de fons direccional entre navegadors
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Creeu un degradat de fons de tres colors per a navegadors creuats
`#gradient > .radial()`	`@innerColor, @outerColor`	Creeu un degradat de fons radial entre navegadors
`#gradient > .striped()`	`@color, @angle`	Creeu un degradat de fons amb ratlles per a navegadors creuats
`#gradientBar()`	`@primaryColor, @secondaryColor`	S'utilitza per als botons per assignar un degradat i una vora una mica més fosca

Nota: si esteu enviant una sol·licitud d'extracció a GitHub amb CSS modificat, heu de tornar a compilar el CSS mitjançant qualsevol d'aquests mètodes.

Eines per compilar

Node amb makefile

Instal·leu el compilador de línia d'ordres LESS i uglify-js globalment amb npm executant l'ordre següent:

$ npm install -g menys uglify-js

Un cop instal·lat, només heu d'executar make-lo des de l'arrel del vostre directori d'arrencada i ja esteu a punt.

A més, si teniu watchr instal·lat, podeu executar make watchperquè bootstrap es reconstrueixi automàticament cada vegada que editeu un fitxer a la llibreria d'arrencada (això no és necessari, només un mètode còmode).

Línia d'ordres

Instal·leu l'eina de línia d'ordres LESS mitjançant Node i executeu l'ordre següent:

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

Assegureu-vos d'incloure --compressaquesta comanda si esteu intentant desar alguns bytes!

Javascript

Baixeu l'últim Less.js i incloeu-hi el camí (i Bootstrap) al fitxer <head>.

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

Per recompilar els fitxers .less, només cal que els deseu i torneu a carregar la vostra pàgina. Less.js els compila i els emmagatzema a l'emmagatzematge local.

Aplicació no oficial per a Mac

L'aplicació no oficial per a Mac mira directoris de fitxers .less i compila el codi en fitxers locals després de cada desat d'un fitxer .less vist.

Si voleu, podeu canviar les preferències a l'aplicació per a la compressió automàtica i en quin directori acaben els fitxers compilats.

Construït amb MENYS

Per què MENYS?

Què inclou?

Aprèn més

Les variables

Mixins

Operacions

Variables d'arrencada Variables LESS, els seus valors i directrius d'ús

Hiperenllaços

Sistema de graella

Tipografia

Colors en escala de grisos

Colors d'accent

Components

Botons

Formes

Barra de navegació

Formulari d'estats i alertes

Mixins d'arrencada

Sobre els mixins

Mixins bàsics

Mixines paramètriques

Afegeix fàcilment el teu

Mixins inclosos

Utilitats

Formes

Tipografia

Sistema de graella

Propietats CSS3

Fons i degradats

Compilant Bootstrap amb LESS

Eines per compilar

Node amb makefile

Línia d'ordres

Javascript

Aplicació no oficial per a Mac

Més aplicacions de Mac

Cruixent

CodeKit

Senzill