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

MENYS CSS

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.

Bastides i enllaços

@bodyBackground @white Color de fons de la pàgina
@textColor @grayDark Color de text predeterminat per a tot el cos, els encapçalaments i molt més
@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

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Mònaco, "Courier New", monoespai
@baseFontSize 13 píxels Han de ser píxels
@baseFontFamily @sansFontFamily
@baseLineHeight 18 píxels Han de ser píxels
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Taules

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

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

@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

Formes

@placeholderText @grayLight
@inputBackground @white
@inputBorder #ccc
@inputBorderRadius 3px
@inputDisabledBackground @grayLighter
@formActionsBackground #f5f5f5

Formulari d'estats i alertes

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

Barra de navegació

@navbarHeight 40 píxels
@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

Desplegables

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

Unitat heroi

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

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.

  1. . element {
  2. . clearfix ();
  3. }

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.

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

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 utilitzantmargin: auto
.ie7-inline-block() cap Utilitzeu-lo a més del normal display: inline-blockper obtenir suport IE7
.size() @height @width Estableix ràpidament l'alçada i l'amplada en una línia
.square() @size Es basa .size()per establir l'amplada i l'alçada amb el mateix valor
.opacity() @opacity Estableix, en nombres sencers, el percentatge d'opacitat (p. ex., "50" o "75")

Formes

Mixin Paràmetres Ús
.placeholder() @color: @placeholderText Estableix el placeholdercolor 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 de percentatge amb n columnes i canaló d'ample x %
#grid > .input() @gridColumnWidth, @gridGutterWidth Genereu el sistema de quadrícula de píxels per als inputelements, tenint en compte el farciment i les vores
.makeColumn @columns: 1, @offset: 0 Converteix qualsevol diven una columna de quadrícula sense les .span*classes

Propietats CSS3

Mixin Paràmetres Ús
.border-radius() @radius Arrodoneix les cantonades d'un element. Pot ser un valor únic o quatre valors separats per espais
.box-shadow() @shadow 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, @y 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-boxper a una amplada completa input)
.user-select() @select Controla la selecció de text amb el cursor en una pàgina
.backface-visibility() @visibility: visible Eviteu el parpelleig del contingut quan utilitzeu transformacions CSS 3D
.resizable() @direction: both Feu que qualsevol element es pugui redimensionar a la dreta i a la part inferior
.content-columns() @columnCount, @columnGap: @gridGutterWidth Feu que el contingut de qualsevol element utilitzi columnes CSS3
.hyphens() @mode: auto Secció de guió CSS3 quan ho desitgeu (inclou word-wrap: break-word)

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, JSHint, Recess i uglify-js globalment amb npm executant l'ordre següent:

$ npm install -g menys jshint recess 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 ./less/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.

Més aplicacions de Mac

Cruixent

Crunch és un editor i compilador LESS fantàstic construït a Adobe Air.

CodeKit

Creada pel mateix noi que l'aplicació no oficial per a Mac, CodeKit és una aplicació per a Mac que compila LESS, SASS, Stylus i CoffeeScript.

Senzill

Aplicació per a Mac, Linux i PC per arrossegar i deixar anar la compilació de fitxers LESS. A més, el codi font es troba a GitHub .