LESS un preprocesador CSS
-
Upload
adolfo-sanz-de-diego -
Category
Technology
-
view
882 -
download
1
description
Transcript of 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