LESS un preprocesador CSS

LESS,UNPREPROCESADORCSS

ADOLFOSANZDEDIEGOSEPTIEMBRE2014

1ELAUTOR

1.1ADOLFOSANZDEDIEGOAntiguoprogramadorwebJEE(6años)Hoyendía:ProfesordeFP(6años):Hardware,SistemasOperativosRedes,Programación

FormadorFreelance(3años):Java,AndroidJavaScript,jQueryJSF,Spring,HibernateGroovy&Grails

1.2ALGUNOSPROYECTOSFundadory/ocreador:HackathonLovers:TweetsSentiment:MarkdownSlides:

Co-fundadory/oco-creador:PeliTweets:PasswordManagerGenerator:

http://hackathonlovers.comhttp://tweetssentiment.com

https://github.com/asanzdiego/markdownslides

http://pelitweets.com

http://pasmangen.github.io

1.3¿DONDEENCONTRARME?Minick:asanzdiegoAboutMe:GitHub:Twitter:Blog:LinkedIn:Google+:

http://about.me/asanzdiegohttp://github.com/asanzdiegohttp://twitter.com/asanzdiego

http://asanzdiego.blogspot.com.eshttp://www.linkedin.com/in/asanzdiego

http://plus.google.com/+AdolfoSanzDeDiego

2INTRODUCCIÓN

2.1¿QUÉES?Lessesunpre-procesadordeCSS.Añadecaracterísticascomovariables,mixins,funciones,etc.

2.2VENTAJASElCSSesasímásfácildemantener,personalizableyextensible.Less(conrespectoaotrospre-procesadoresCSS)tieneunasintaxisparecidaaCSS.

2.3CARACTERÍSTICASLesssepuedeejecutardesdeNodeJS,desdeunnavegador,odesdeRhino.Ademásexistenmuchasherramientasquepermitencompilarlosarchivosyverloscambiosencaliente.

3USANDOLESS

3.1INSTALACIÓNLaformamássencilladeinstalarLess,esatravésdelanpm,elgestordepaquetesdeNodeJS:$npminstall-gless

3.2LÍNEADECOMANDOSUnavezinstalado,sepuedecompilardesdelalíneadecomandos:$lesscstyles.less>styles.css

3.3DESDENODEJS(I)Elsiguientecódigo:

varless=require('less');

less.render('.class{width:(1+1)}',function(e,css){console.log(css);});

3.4DESDENODEJS(II)Sacaráporpantalla:

.class{width:2;}

3.5CONRHINORhinotepermiteusarJavaScriptdesdeunaMáquinaVirtualdeJavajava-jarjs.jar-fless-rhino-<version>.jslessc-rhino-<version>.jsstyles.lessstyles.css

3.6DESDEELNAVEGADOR(I)Eslaformamásfácilparaempezar,peronoesrecomendableusarloasíenproducción.Serecomiendapre-compilarusandoNodeJS,Rhino,ounadelasmuchasherramientasdetercerosdisponibles.

3.7DESDEELNAVEGADOR(II)Enlazartuarchivolessquequierasprecompilar:

<linkrel="stylesheet/less"type="text/css"href="styles.less"/>

3.8DESDEELNAVEGADOR(II)Descargar:

Enlazareljsdeless:https://github.com/less/less.js/archive/master.zip

<scriptsrc="less.js"type="text/javascript"></script>

3.9DESDEELNAVEGADOR(III)Consejos;Enlazatusarchivosaprecompilarantesquelalibreríadeless.Sihaymásdeunarchivoaprecompilar,estossecompilandeformaindependiente.

4CARACTERÍSTICAS

4.1VARIABLES(I)Elsiguientecódigo:

@nice-blue:#5B83AD;@light-blue:@nice-blue+#111;

#header{color:@light-blue;}

4.2VARIABLES(II)Lescompilaa:

#header{color:#6c94be;}

Nota:lasvariablessonenrealidad"constantes"yaquesólopuedenserdefinidasunavez.

4.3EXTENDSonunaformadeherencia:

.animal{background-color:black;color:white;}.bear{&:extend(.animal);background-color:brown;}

4.4MIXINS(I)LosMixinssonunaformadereutilizarpropiedadesyadefinidas:Imaginemoslaclase.bordered:.bordered{border-top:dotted1pxblack;border-bottom:solid2pxblack;}

4.5MIXINS(II)Lopodemosusarasí:

#menua{color:#111;.bordered;}

.posta{color:red;.bordered;}

Nota:Ademásdeclases,tambiénsepuedenutilizar#idscomomixins.

4.6REGLASANIDADAS(I)SupongamosquetenemoselsiguienteCSS:

#header{color:black;}#headera{color:blue;}#headera:hover{color:red;}

4.7REGLASANIDADAS(II)PuesconLesssepuedeescribirasí:

#header{color:black;a{color:blue;&:hover{color:red;}}}

Sepuedenusarpseudo-elementos,yllamaralselectorpadreactual,con&:

4.8MEDIASQUERIESANIDADAS(I)Elsiguientecódigo:

@mediascreen{.screencolor{color:green;}}@mediascreenand(min-width:768px){.screencolor{color:red;}}@mediatv{.screencolor{color:black;}}

4.9MEDIASQUERIESANIDADAS(II)Sepodríaescribir:

.screencolor{@mediascreen{color:green;@media(min-width:768px){color:red;}}@mediatv{color:black;}}

4.10OPERACIONES(I)Lesspuedehaceroperacionesconnúmeros,coloresovariables.Ademássabediferenciarcuandoesunnúmeroouncolor.

4.11OPERACIONES(II)@base:5%;@filler:@base*2;@other:@base+@filler;@base-color:#888/4;

background-color:@base-color+#111;height:100%/2+@other;

4.12FUNCIONESLessdisponedeunavariedaddefuncionesmatemáticas,quemanipulancadenas,yquetransformanloscolores:@base:#f04615;@list:200,500,1200;

.class{width:extract(@list,3);color:saturate(@base,5%);background-color:lighten(@base,25%);}

4.13NAMESPACES(I)Aveces,podemosquereragruparmixins,pormotivosdeorganización,osimplementeparaencapsularlos.

4.14NAMESPACES(II)Veamoscomopodemosagruparvariosmixins:

#bundle{.button{border:1pxsolidblack;background-color:grey;}.tab{...}.citation{...}}

4.15NAMESPACES(III)Ahorapodemosutilizarelmixin.buttonqueestáenelnamespace#bundledeestaforma:#headera{color:orange;#bundle>.button;}

4.16SCOPELosámbitosdelasvariablesenLessesmuysimilaraotroslenguajes:@var:red;

#page{@var:white;#header{color:@var;//white}}

4.17COMENTARIOSCon//...ycon/*...*/

/*Onehellofablockstylecomment!*/@var:red;

//Getinline!@var:white;

4.18IMPORTS//foo.lessisimported@import"foo";

//foo.lessisimported@import"foo.less";

//foo.phpimportedasalessfile@import"foo.php";

//foo.cssimportedasacssfile@import"foo.css";

5VARIABLES

5.1¿PORQUÉ?(I)Lasvariablesseusanparanotenerquerepetirconstantementelosmismosvalores,conloqueseconsigueademásuncódigomásfácildemantener:a,.link{color:#428bca;}.widget{color:#fff;background:#428bca;}

5.2¿PORQUÉ?(II)ConLessquedaría:

@color:#428bca

a,.link{color:@color;}.widget{color:#fff;background:@color;}

5.3SELECTORES(I)Tambiénsepuedenusarcomoselectores:

@mySelector:banner;

.@{mySelector}{font-weight:bold;line-height:40px;margin:0auto;}

5.4SELECTORES(II)CompiladoconLessquedaría:

.banner{font-weight:bold;line-height:40px;margin:0auto;}

5.5URLSTambiénsepuedenusarURLs:

@images:"../img";

body{color:#444;background:url("@{images}/white-sand.png");}

5.6PROPIEDADES(I)Tambiénsepuedenusarcomopropiedades:

@property:color;

.widget{@{property}:#0ee;background-@{property}:#999;}

5.7PROPIEDADES(II)CompiladoconLessquedaría:

.widget{color:#0ee;background-color:#999;}

5.8NOMBRESDELASVARIABLES(I)Tambiénsepuedenusarvariablescomonombresdeotrasvariables:@fnord:"Iamfnord.";@var:"fnord";content:@@var;

5.9NOMBRESDELASVARIABLES(II)CompiladoconLessquedaría:

content:"Iamfnord.";

5.10CARGAPEREZOSA(I)Lasvariablesnotienenqueserdeclaradasantesdeserutilizados.Esoesválido:.lazy-eval{width:@var;}

@var:@a;@a:9%;

5.11CARGAPEREZOSA(II)CompiladoconLessquedaría:

.lazy-eval{width:9%;}

5.12ÁMBITOS(I)Aldefinirunavariabledosveces,seutilizalaúltimadefinicióndelavariable:@var:0;.class{@var:1;.brass{@var:2;three:@var;@var:3;}one:@var;}

5.13ÁMBITOS(II)CompiladoconLessquedaría:

.class{one:1;}.class.brass{three:3;}

6EXTEND

6.1CASODEUSO(I)Imaginoquetenemoslosiguiente:

.animal{background-color:black;color:white;}

Yqueremostenerunsubtipodeanimalquesobrescribalapropiedadbackground-color.

6.2CASODEUSO(II)Podemoshacerlosiguiente:

<aclass="animalbear">Bear</a>

.animal{background-color:black;color:white;}.bear{background-color:brown;}

6.3CASODEUSO(III)Opodemossimplificarelhtmlyusarextend:

<aclass="bear">Bear</a>

.animal{background-color:black;color:white;}.bear{&:extend(.animal);background-color:brown;}

6.4REDUCEELTAMAÑODELCSS(I)Ejemplodemixin:

.my-inline-block(){display:inline-block;font-size:0;}.thing1{.my-inline-block;}.thing2{.my-inline-block;}

6.5REDUCEELTAMAÑODELCSS(II)Lesslocompilaa:

.thing1{display:inline-block;font-size:0;}.thing2{display:inline-block;font-size:0;}

6.6REDUCEELTAMAÑODELCSS(III)Conextends:

.my-inline-block{display:inline-block;font-size:0;}.thing1{&:extend(.my-inline-block);}.thing2{&:extend(.my-inline-block);}

6.7REDUCEELTAMAÑODELCSS(IV)Lesslocompilaa:

.my-inline-block,.thing1,.thing2{display:inline-block;font-size:0;}

7MIXINS

7.1SELECTORESSepuedenhacerMixinstantoconselectoresdeclasecomoconselectoresdeidentificación:.a,#b{color:red;}.mixin-class{.a();}.mixin-id{#b();}

7.2NOEXPORTARMIXINS(I)SinoquieresqueelMixinseaexportadoalCSS,utilizalosparéntesis:.my-mixin{color:black;}.my-other-mixin(){background:white;}.class{.my-mixin;.my-other-mixin;}

7.3NOEXPORTARMIXINS(II)Lesslocompilaa:

.my-mixin{color:black;}.class{color:black;background:white;}

7.4PSEUDO-CLASES(I)LosMixinstambiénsoportanpseudo-clases:

.my-hover-mixin(){&:hover{border:1pxsolidred;}}button{.my-hover-mixin();}

7.5PSEUDO-CLASES(II)Lesslocompilaa:

button:hover{border:1pxsolidred;}

7.6NAMESPACES(I)Podemoscrearunnamespaceconvariosmixins:#outer{.inner{color:red;}}

7.7NAMESPACES(II)ParallamaralMixin,losparentesis,elespacioyel>esopcional,asíquesepuedehacerdetodasestasformas:#outer>.inner;#outer>.inner();#outer.inner;#outer.inner();#outer.inner;#outer.inner();

7.8!IMPORTANTKEYWORD(I)DetrásdeunMixin,alcompilarponetodocomoimportante:.foo(){background:#f5f5f5;color:#fff;}.unimportant{.foo();}.important{.foo()!important;}

7.9!IMPORTANTKEYWORD(II)Lesslocompilaa:

.unimportant{background:#f5f5f5;color:#fff;}.important{background:#f5f5f5!important;color:#fff!important;}

8MIXINSPARAMÉTRICOS

8.1PARÁMETROS(I)LosMixinstambiénpuedetomarparámetros:.border-radius(@radius){-webkit-border-radius:@radius;-moz-border-radius:@radius;border-radius:@radius;}

#header{.border-radius(4px);}

8.2PARÁMETROS(II)Lesslocompilaa:

#header{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}

8.3VALORPORDEFECTO(I)LosMixinstambiénpuedetomarparámetrosconunvalorpordefecto:.border-radius(@radius:5px){-webkit-border-radius:@radius;-moz-border-radius:@radius;border-radius:@radius;}

#header{.border-radius;}

8.4VALORPORDEFECTO(II)Lesslocompilaa:

#header{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}

8.5PARÁMETROSMÚLTIPLES(I)Losparámetrossepuedensepararporcoma(,)oporpuntoycoma(;).Serecomiendaelpuntoycoma(;).

8.6PARÁMETROSMÚLTIPLES(II)Lacoma(,)tienedoblesentido:sepuedeinterpretarcomounseparadordeparámetrosMixinocomoseparadordeloselementosdeunalista.Sielcompiladorencuentraalmenosunpuntoycoma(;)asumequelosargumentosseseparanporpuntoycomayloscomaspertenecenalistas.

8.7PARÁMETROSMÚLTIPLES(III).name(1,2,3;something,else)2parámetros,cadaunoesunalista

.name(1,2,3)3parámetros,cadaunocontieneunnúmero

.name(1,2,3;)1parámetro,queesunalista

.name(@param1:red,blue;)1parámetro,conunalistacomovalorpredeterminado

8.8PARÁMETROSMÚLTIPLES(IV)Sepuedetenervariosmixinsconelmismonombreyelmismonúmerodeparámetros,puesLessutilizarátodoslosposibles:.mixin(@color){color:@color;}.mixin(@color;@padding:2){padding:@padding;}.mixin(@color;@padding;@margin:2){margin:@margin;}.some.selectordiv{.mixin(#008000);}

8.9PARÁMETROSMÚLTIPLES(V)Lesslocompilaa:

.some.selectordiv{color-1:#008000;padding-2:2;}

8.10PARÁMETROSCONNOMBRES(I)Sepuedenusarparámetrosconnombre:

.mixin(@color:black;@margin:10px;@padding:20px){...}.class1{.mixin(@margin:20px;@color:#33acfe);}.class2{.mixin(#efca44;@padding:40px);}

8.11PARÁMETROSCONNOMBRES(II)Lesslocompilaa:

.class1{color:#33acfe;margin:20px;padding:20px;}.class2{color:#efca44;margin:10px;padding:40px;}

8.12@ARGUMENTS(I)Podemoscogertodoslosparámetrosdeentradajuntos:.box-shadow(@x:0;@y:0;@blur:1px;@color:#000){

-webkit-box-shadow:@arguments;-moz-box-shadow:@arguments;box-shadow:@arguments;}.big-block{.box-shadow(2px;5px);}

8.13@ARGUMENTS(II)Lesslocompilaa:

.big-block{-webkit-box-shadow:2px5px1px#000;-moz-box-shadow:2px5px1px#000;box-shadow:2px5px1px#000;}

8.14...PodemospermitirqueelMixinadmitavariosparámetros://matches0-Narguments.mixin(...){

//matchesexactly0arguments.mixin(){

//matches0-1arguments.mixin(@a:1){

//matches0-Narguments.mixin(@a:1;...){

//matches1-Narguments.mixin(@a;...){

8.15@RESTCogetodoslosparámetrosde...:

.mixin(@a;@rest...){

/*@restrecogetodoslosparámetrosdespuésde@a*/

/*@argumentsrecogetodoslosparámetros(incluido@a)*/}

8.16PATTERNMATCHING(I)Siqueremosqueseejecuteunmixindependiendodelvalordeunavariable:.mixin(dark;@color){color:darken(@color,10%);}.mixin(light;@color){color:lighten(@color,10%);}.mixin(@_;@color){/*all*/display:block;}

@switch:light;

.class{.mixin(@switch;#888);}

8.17PATTERNMATCHING(II)Lesslocompilaa:

.class{color:#a2a2a2;display:block;}

8.18MIXINSCOMOFUNCIONES(I)Todaslasvariablesdefinidasenunmixinsonvisiblesypuedenserutilizadosenelámbitodedondeesllamado:.mixin(){@width:100%;@height:200px;}

.caller{.mixin();width:@width;height:@height;}

8.19MIXINSCOMOFUNCIONES(II)Lesslocompilaa:

.caller{width:100%;height:200px;}

8.20MIXINSCOMOFUNCIONES(III)Otroejemplo:

.average(@x,@y){@average:((@x+@y)/2);}

div{

//"call"themixin.average(16px,50px);

//useits"return"valuepadding:@average;}

8.21MIXINSCOMOFUNCIONES(IV)Lesslocompilaa:

div{padding:33px;}

9MIXINSCONDICIONALES

9.1SINTAXIS(I)MuyparecidaalasMediaQueries:

.mixin(@a)when(lightness(@a)>=50%){background-color:black;}.mixin(@a)when(lightness(@a)<50%){background-color:white;}.mixin(@a){color:@a;}.class1{.mixin(#ddd)}.class2{.mixin(#555)}

9.2SINTAXIS(II)Lesslocompilaa:

.class1{background-color:black;color:#ddd;}.class2{background-color:white;color:#555;}

9.3OPERADORESSepuedenusarlosoperadores>,>=,=,=<,<@media:mobile;

.mixin(@a)when(@media=mobile){...}

.mixin(@a)when(@media=desktop){...}

.max(@a;@b)when(@a>@b){width:@a}

.max(@a;@b)when(@a<@b){width:@b}

9.4ANDComoenlasMediaQueries,usandoANDtodaslassentenciassetienenquecumplir:.mixin(@a)when(isnumber(@a))and(@a>0){...}

9.5COMA(,)ComoenlasMediaQueries,separarsentenciasconcomas(,)equivaleaunOR,porloqueseentraráenelMixinencuantosecumplaunadelassentencias:.mixin(@a)when(@a>10),(@a<-10){...}

9.6NOTComoenlasMediaQueries,usandoNOTseniegaunasentencia:.mixin(@b)whennot(@b>0){...}

9.7COMPROBARTIPOSTenemoslassiguientesfuncionesparacomprobartipos:isnumberisstringiscoloriskeywordisurl

9.8COMPROBARUNIDADESTenemoslassiguientesfuncionesparacomprobarunidades:ispixelisemispercentageisunit

9.9LOOPS(I)LosMixinssepuedenllamarasímismos.Conestarecursividadsepuedencrearloops:.loop(@counter)when(@counter>0){

//nextiteration.loop((@counter-1));

//codeforeachiterationwidth:(10px*@counter);}

div{.loop(5);//launchtheloop}

9.10LOOPS(II)Lesslocompilaa:

div{width:10px;width:20px;width:30px;width:40px;width:50px;}

9.11LOOPS(III)PodríamoshacerungriddeCSS:

.generate-columns(4);

.generate-columns(@n,@i:1)when(@i=<@n){

.column-@{i}{width:(@i*100%/@n);}.generate-columns(@n,(@i+1));}

9.12LOOPS(IV)Lesslocompilaa:

.column-1{width:25%;}.column-2{width:50%;}.column-3{width:75%;}.column-4{width:100%;}

10MERGE

10.1¿QUÉES?Permitecombinarpropiedadesconcoma(,)oconespacio(),enunasolapropiedad.

10.2COMA(I)Ejemploconcoma(,):

.mixin(){box-shadow+:inset0010px#555;}.myclass{.mixin();box-shadow+:0020pxblack;}

10.3COMA(II)Lesslocompilaa:

.myclass{box-shadow:inset0010px#555,0020pxblack;}

10.4ESPACIO(I)Ejemploconespacio():

.mixin(){transform+_:scale(2);}.myclass{.mixin();transform+_:rotate(15deg);}

10.5ESPACIO(II)Lesslocompilaa:

.myclass{transform:scale(2)rotate(15deg);}

10.6EXPLICITOParaprevenircualquierjoininvoluntario,mergerequierequepongas+o+_deformaexplícitaenladeclaracióndecadaunodelosjois.

11SELECTORPADRE

11.1ELOPERADOR&(I)Eloperador&representaelselectorpadre,ysueleserusadoparamodificarclasesousarpseudoclases:a{color:blue;&:hover{color:green;}}

11.2ELOPERADOR&(II)Lesslocompilaa:

a{color:blue;}

a:hover{color:green;}

11.3CLASESREPETITIVAS(I)Otrouso,apartedelaspseudoclases,eseldeproducirnombresdeclasesrepetitivos:.button{&-ok{background-image:url("ok.png");}&-cancel{background-image:url("cancel.png");}&-custom{background-image:url("custom.png");}}

11.4CLASESREPETITIVAS(II)Lesslocompilaa:

.button-ok{background-image:url("ok.png");}.button-cancel{background-image:url("cancel.png");}.button-custom{background-image:url("custom.png");}

11.5MULTIPLES&(I)Sepuederepetirelpadre:

.link{&+&{color:red;}&&{color:green;}&&{color:blue;}&,&ish{color:cyan;}}

11.6MULTIPLES&(II)Lesslocompilaa:

.link+.link{color:red;}.link.link{color:green;}.link.link{color:blue;}.link,.linkish{color:cyan;}

11.7MULTIPLES&(III)Otroejemplo:

.grand{.parent{&>&{color:red;}&&{color:green;}&&{color:blue;}&,&ish{color:cyan;}}}

11.8MULTIPLES&(IV)Lesslocompilaa:

.grand.parent>.grand.parent{color:red;}.grand.parent.grand.parent{color:green;}.grand.parent.grand.parent{color:blue;}.grand.parent,.grand.parentish{color:cyan;}

11.9CAMBIARELORDEN(I)Enalgunoscasopuedeserutilcambiarelordendelhijoconrespectoalpadre:.header{.menu{border-radius:5px;.no-borderradius&{background-image:url('img.png');}}}

11.10CAMBIARELORDEN(II)Lesslocompilaa:

.header.menu{border-radius:5px;}.no-borderradius.header.menu{background-image:url('img.png');}

11.11EXPLOSIÓNCOMBINATORIA(I)Eloperador&puedeserusadoparagenerartodaslasposiblespermutacionesdelosselectorespadre:a,ul,li{border-top:2pxdotted#366;&+&{border-top:0;}}

11.12EXPLOSIÓNCOMBINATORIA(II)Lesslocompilaa:

a,ul,li{border-top:2pxdotted#366;}

a+a,a+ul,a+li,ul+a,ul+ul,ul+li,li+a,li+ul,li+li{border-top:0;}

12FUNCIONES

12.1RESUMEN

MiscFunctionsStringFunctionsListFunctionsMathFunctionsTypeFunctionsColorFunctions

http://lesscss.org/functions/

12.2MISCFUNCTIONS

colorconvertdata-uridefaultunitget-unitsvg-gradient

http://lesscss.org/functions/#misc-functions

12.3STRINGFUNCTIONS:

escapee%formatreplace

http://lesscss.org/functions/#string-functions

12.4LISTFUNCTIONS

lengthextract

http://lesscss.org/functions/#list-functions

12.5MATHFUNCTIONS(I)

ceilfloorpercentageroundsqrtabspowmodminmax

http://lesscss.org/functions/#math-functions

12.6MATHFUNCTIONS(II)

sinasincosacostanatanpi

http://lesscss.org/functions/#math-functions

12.7TYPEFUNCTIONS

isnumberisstringiscoloriskeywordisurlispixelisemispercentageisunit

http://lesscss.org/functions/#type-functions

12.8COLORDEFINITIONFUNCTIONS

rgbrgbaargbhslhslahsvhsva

http://lesscss.org/functions/#color-definitions

12.9COLORCHANNELFUNCTIONS

huesaturationlightnesshsvhuehsvsaturationhsvvalueredgreenbluealphalumaluminance

http://lesscss.org/functions/#color-channel

12.10COLOROPERATIONFUNCTIONS

saturatedesaturatelightendarkenfadeinfadeoutfadespinmixgreyscalecontrast

http://lesscss.org/functions/#color-operations

12.11COLORBLENDINGFUNCTIONS

multiplyscreenoverlaysoftlighthardlightdifferenceexclusionaveragenegation

http://lesscss.org/functions/#color-blending

13ACERCADE

13.1LICENCIAEstastransparenciasestánhechascon:MarkdownSlides:

EstastransparenciasestánbajounalicenciaCreativeCommonsReconocimiento-CompartirIgual3.0:

https://github.com/asanzdiego/markdownslides

http://creativecommons.org/licenses/by-sa/3.0/es

13.2FUENTESTransparencias:

Código:

https://github.com/asanzdiego/curso-interfaces-web-2014/tree/master/04-less/slides

https://github.com/asanzdiego/curso-interfaces-web-2014/tree/master/01-less/src

13.3BIBLIOGRAFÍADocumentaciónoficialdeLesshttp://lesscss.org