{"id":334,"date":"2013-09-10T03:31:30","date_gmt":"2013-09-10T03:31:30","guid":{"rendered":"http:\/\/blog.luisrodriguez.pe\/?p=334"},"modified":"2013-10-24T21:57:53","modified_gmt":"2013-10-24T21:57:53","slug":"comenzar-con-pre-procesadores-de-css-less","status":"publish","type":"post","link":"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/","title":{"rendered":"Comenzar con el pre procesador LESS"},"content":{"rendered":"<p><a href=\"http:\/\/lesscss.org\/\" target=\"_blank\">LESS <\/a>es un pre procesador din\u00e1mico de css que nos permite programar \u00a0en \u00a0CSS con variables, funciones, operaciones matem\u00e1ticas, etc asi haciendo mas interesante el desarrollo para los <a href=\"http:\/\/luisrodriguez.pe\" target=\"_blank\">front end<\/a>.<\/p>\n<p>LESS no es el \u00fanico pre procesador que podemos usar ahi tenemos a \u00a0<a href=\"http:\/\/learnboost.github.io\/stylus\/\" target=\"_blank\">Stylus <\/a>y <a href=\"http:\/\/sass-lang.com\/\" target=\"_blank\">SASS<\/a>\u00a0que tambien estan buenos pero por que mi preferencia a LESS? \u00a0es por que \u00a0tiene una sintaxis muy parecida a CSS y la escala de aprendizaje es casi nula.<\/p>\n<p>para comenzar primero nos vamos a la web de LESS <a href=\"http:\/\/lesscss.org\/\" target=\"_blank\">http:\/\/lesscss.org\/<\/a>\u00a0o podemos usar una CDN\u00a0<a href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/less.js\/1.4.1\/less.min.js\" target=\"_blank\">\/\/cdnjs.cloudflare.com\/ajax\/libs\/less.js\/1.4.1\/less.min.js<\/a>\u00a0agregamos el javascript en el pie del html (lo pueden hacer en la cabecera pero no lo recomiendo por no ser una buena practica).<\/p>\n<p>ahora cuando agregue un css debe colocar de esta forma<\/p>\n<p>&lt;link rel=\u00bbstylesheet\u00bb <strong>type<\/strong>=\u00bbtext\/less\u00bb href=\u00bbcss\/main.css\u00bb&gt;<\/p>\n<p>si se dan cuenta cambie solo el<strong> type<\/strong>\u00a0 que ya no es\u00a0\u00abtext\/css\u00bb si no\u00a0\u00abtext\/less\u00bb esto sirve para que el javascript sepa en que archivo efectuar el proceso y otro detalle que el archivo que llamamos en el <strong>href<\/strong> puede tener la extension de css o less.<\/p>\n<p>ahora en nuestro archivo externo que incluimos podemos ya programar.<\/p>\n<p><strong>creamos una variable indicando una fuente y para mostrar solo lo colocamos en donde queremos que se muestr<\/strong><\/p>\n\n<div class=\"wp_syntax\"><table><tr><td class=\"code\"><pre class=\"css\" style=\"font-family:monospace;\"><span style=\"color: #a1a100;\">@fuentebase:'HELVETICA';<\/span>\n&nbsp;\nbody<span style=\"color: #00AA00;\">&#123;<\/span>\n<span style=\"color: #000000; font-weight: bold;\">font-family<\/span><span style=\"color: #00AA00;\">:<\/span><span style=\"color: #a1a100;\">@fuentebase;<\/span>\n<span style=\"color: #00AA00;\">&#125;<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n<p><strong>Creamos una funcion (Mixins) que nos permitira ahorrar lineas de codigos para usr el font face, las funciones como en todo lenguaje de programacion nos permite enviar variables y en este caso nuestra funcion tiene 2 variables el nombre que le asignamos a la fuente para ser llamada y el nombre del archivo que tiene la fuente en todos sus formatos.<br \/>\npara concatenar una variable con un string el nombre de la variable debe estar entre corchetes {} y el @ que simboliza que es variable fue de los corchetes.<\/strong><\/p>\n\n<div class=\"wp_syntax\"><table><tr><td class=\"code\"><pre class=\"css\" style=\"font-family:monospace;\"><span style=\"color: #808080; font-style: italic;\">\/*creamos una funcion y pedimos 2 variables*\/<\/span>\n.font-face<span style=\"color: #00AA00;\">&#40;<\/span><span style=\"color: #a1a100;\">@nombrefuente,@nombrearchivo) {<\/span>\n\t<span style=\"color: #000000; font-weight: bold;\">font-family<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #a1a100;\">@nombrefuente;<\/span>\n\tsrc<span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #993333;\">url<\/span><span style=\"color: #00AA00;\">&#40;<\/span><span style=\"color: #ff0000;\">'..\/fonts\/@{nombrearchivo}.eot'<\/span><span style=\"color: #00AA00;\">&#41;<\/span><span style=\"color: #00AA00;\">;<\/span>\n\tsrc<span style=\"color: #00AA00;\">:<\/span> local<span style=\"color: #00AA00;\">&#40;<\/span><span style=\"color: #ff0000;\">'?'<\/span><span style=\"color: #00AA00;\">&#41;<\/span><span style=\"color: #00AA00;\">,<\/span> <span style=\"color: #993333;\">url<\/span><span style=\"color: #00AA00;\">&#40;<\/span><span style=\"color: #ff0000;\">'..\/fonts\/@{nombrearchivo}.woff'<\/span><span style=\"color: #00AA00;\">&#41;<\/span> format<span style=\"color: #00AA00;\">&#40;<\/span><span style=\"color: #ff0000;\">'woff'<\/span><span style=\"color: #00AA00;\">&#41;<\/span><span style=\"color: #00AA00;\">,<\/span> <span style=\"color: #993333;\">url<\/span><span style=\"color: #00AA00;\">&#40;<\/span><span style=\"color: #ff0000;\">'..\/fonts\/@{nombrearchivo}.ttf'<\/span><span style=\"color: #00AA00;\">&#41;<\/span> format<span style=\"color: #00AA00;\">&#40;<\/span><span style=\"color: #ff0000;\">'truetype'<\/span><span style=\"color: #00AA00;\">&#41;<\/span><span style=\"color: #00AA00;\">,<\/span> <span style=\"color: #993333;\">url<\/span><span style=\"color: #00AA00;\">&#40;<\/span><span style=\"color: #ff0000;\">'..\/fonts\/@{nombrearchivo}.svg'<\/span><span style=\"color: #00AA00;\">&#41;<\/span> format<span style=\"color: #00AA00;\">&#40;<\/span><span style=\"color: #ff0000;\">'svg'<\/span><span style=\"color: #00AA00;\">&#41;<\/span><span style=\"color: #00AA00;\">;<\/span>\n\t<span style=\"color: #000000; font-weight: bold;\">font-weight<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #993333;\">normal<\/span><span style=\"color: #00AA00;\">;<\/span>\n\t<span style=\"color: #000000; font-weight: bold;\">font-style<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #993333;\">normal<\/span><span style=\"color: #00AA00;\">;<\/span>\n<span style=\"color: #00AA00;\">&#125;<\/span>\n&nbsp;\n<span style=\"color: #808080; font-style: italic;\">\/*aqui solo llamamos a la funcion mandando las variables*\/<\/span>\n<span style=\"color: #a1a100;\">@font-face {<\/span>\n\t.font-face<span style=\"color: #00AA00;\">&#40;<\/span><span style=\"color: #ff0000;\">'HELVETICA'<\/span><span style=\"color: #00AA00;\">,<\/span><span style=\"color: #ff0000;\">'HELVET'<\/span><span style=\"color: #00AA00;\">&#41;<\/span>\n<span style=\"color: #00AA00;\">&#125;<\/span>\n<span style=\"color: #a1a100;\">@font-face {<\/span>\n\t.font-face<span style=\"color: #00AA00;\">&#40;<\/span><span style=\"color: #ff0000;\">'Dakota Regular'<\/span><span style=\"color: #00AA00;\">,<\/span><span style=\"color: #ff0000;\">'Dakota_Regular'<\/span><span style=\"color: #00AA00;\">&#41;<\/span>\n<span style=\"color: #00AA00;\">&#125;<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n<p><strong>anidar elementos que su nombre lo describe perfectamente pero con un ejemplo lo tendr\u00e1n mas claro<\/strong><\/p>\n\n<div class=\"wp_syntax\"><table><tr><td class=\"code\"><pre class=\"css\" style=\"font-family:monospace;\">section<span style=\"color: #00AA00;\">&#123;<\/span>\n    <span style=\"color: #000000; font-weight: bold;\">width<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #933;\">1024px<\/span><span style=\"color: #00AA00;\">;<\/span>\n    <span style=\"color: #000000; font-weight: bold;\">height<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #933;\">768px<\/span><span style=\"color: #00AA00;\">;<\/span>\n    input<span style=\"color: #00AA00;\">&#123;<\/span><span style=\"color: #000000; font-weight: bold;\">font-family<\/span><span style=\"color: #00AA00;\">:<\/span><span style=\"color: #a1a100;\">@fuentebase;}<\/span>\n    <span style=\"color: #6666ff;\">.nube<\/span><span style=\"color: #00AA00;\">&#123;<\/span> <span style=\"color: #000000; font-weight: bold;\">position<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #993333;\">absolute<\/span><span style=\"color: #00AA00;\">;<\/span><span style=\"color: #00AA00;\">&#125;<\/span>\n<span style=\"color: #00AA00;\">&#125;<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n<p>como se ven incluimos dentro de section a los otros elementos que cuando lo procese less nos da como resultado<\/p>\n\n<div class=\"wp_syntax\"><table><tr><td class=\"code\"><pre class=\"css\" style=\"font-family:monospace;\">section<span style=\"color: #00AA00;\">&#123;<\/span>\n    <span style=\"color: #000000; font-weight: bold;\">width<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #933;\">1024px<\/span><span style=\"color: #00AA00;\">;<\/span>\n    <span style=\"color: #000000; font-weight: bold;\">height<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #933;\">768px<\/span><span style=\"color: #00AA00;\">;<\/span>\n<span style=\"color: #00AA00;\">&#125;<\/span>\nsection input<span style=\"color: #00AA00;\">&#123;<\/span><span style=\"color: #000000; font-weight: bold;\">font-family<\/span><span style=\"color: #00AA00;\">:<\/span><span style=\"color: #a1a100;\">@fuentebase;}<\/span>\nsection <span style=\"color: #6666ff;\">.nube<\/span><span style=\"color: #00AA00;\">&#123;<\/span> <span style=\"color: #000000; font-weight: bold;\">position<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #993333;\">absolute<\/span><span style=\"color: #00AA00;\">;<\/span><span style=\"color: #00AA00;\">&#125;<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n<p><strong>para crear un hover u otro estado del elemento lo hacemos de esta manera<\/strong><\/p>\n\n<div class=\"wp_syntax\"><table><tr><td class=\"code\"><pre class=\"css\" style=\"font-family:monospace;\">a<span style=\"color: #00AA00;\">&#123;<\/span>\n\t<span style=\"color: #000000; font-weight: bold;\">text-decoration<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #993333;\">none<\/span><span style=\"color: #00AA00;\">;<\/span>\n&nbsp;\n\t&amp;amp<span style=\"color: #00AA00;\">;<\/span><span style=\"color: #3333ff;\">:hover<\/span><span style=\"color: #00AA00;\">&#123;<\/span>\n\t\t<span style=\"color: #000000; font-weight: bold;\">text-decoration<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #993333;\">underline<\/span><span style=\"color: #00AA00;\">;<\/span>\n\t<span style=\"color: #00AA00;\">&#125;<\/span>\n<span style=\"color: #00AA00;\">&#125;<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n<p><strong>less por defecto esta configurado para estar para desarrollo pero cuando subamos en linea debemos indicar a less que ya estamos en producci\u00f3n y para esto debemos incluir este script antes del llamado al less.js.<\/strong><\/p>\n\n<div class=\"wp_syntax\"><table><tr><td class=\"code\"><pre class=\"javascript\" style=\"font-family:monospace;\"><span style=\"color: #006600; font-style: italic;\">\/\/ puede ser development y production<\/span>\n    less <span style=\"color: #339933;\">=<\/span> <span style=\"color: #009900;\">&#123;<\/span>\n        env<span style=\"color: #339933;\">:<\/span> <span style=\"color: #3366CC;\">&quot;production&quot;<\/span>\n    <span style=\"color: #009900;\">&#125;<\/span><span style=\"color: #339933;\">;<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n<p>y para que sirve?<br \/>\nsi tu archivo less tiene un error<\/p>\n<p><a href=\"http:\/\/blog.luisrodriguez.pe\/wp-content\/uploads\/2013\/09\/error-less.png\"><img decoding=\"async\" class=\"size-full wp-image-336 alignleft\" title=\"error-less\" src=\"http:\/\/blog.luisrodriguez.pe\/wp-content\/uploads\/2013\/09\/error-less.png\" alt=\"error-less\" width=\"630\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2013\/09\/error-less.png 836w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2013\/09\/error-less-600x412.png 600w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2013\/09\/error-less-300x205.png 300w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2013\/09\/error-less-700x480.png 700w\" sizes=\"(max-width: 836px) 100vw, 836px\" \/><\/a><\/p>\n<p>nos muestra esto e imag\u00ednate que el usuario vea esto? no es nada profesional entonces debemos configurar cuando esta en linea que esto este en producci\u00f3n y las lineas de arriba sirven para eso.<\/p>\n<p>Ahora ahi un detalle que seguro varios ya se dieron cuenta que hacemos lenta la carga de la web por el proceso de generar entonces pueden usar <a href=\"http:\/\/winless.org\/\" target=\"_blank\">Winless<\/a>\u00a0un software que le das la ruta de tu archivo less y te genera el css y por cada cambio este programa lo actualiza.<\/p>\n","protected":false},"excerpt":{"rendered":"LESS es un pre procesador din\u00e1mico de css que nos permite programar \u00a0en \u00a0CSS con variables, funciones, operaciones matem\u00e1ticas, etc asi haciendo mas interesante el desarrollo para los front end. LESS no es el \u00fanico pre procesador que podemos usar ahi tenemos a \u00a0Stylus y SASS\u00a0que tambien estan buenos pero por que mi preferencia a[&#8230;]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,9],"tags":[],"class_list":["post-334","post","type-post","status-publish","format-standard","hentry","category-css3","category-desarrollo-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Comenzar con el pre procesador LESS - Blog Luis Rodriguez<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comenzar con el pre procesador LESS - Blog Luis Rodriguez\" \/>\n<meta property=\"og:description\" content=\"LESS es un pre procesador din\u00e1mico de css que nos permite programar \u00a0en \u00a0CSS con variables, funciones, operaciones matem\u00e1ticas, etc asi haciendo mas interesante el desarrollo para los front end. LESS no es el \u00fanico pre procesador que podemos usar ahi tenemos a \u00a0Stylus y SASS\u00a0que tambien estan buenos pero por que mi preferencia a[...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Luis Rodriguez\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/luisrodriguez.pe\" \/>\n<meta property=\"article:published_time\" content=\"2013-09-10T03:31:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-10-24T21:57:53+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/blog.luisrodriguez.pe\/wp-content\/uploads\/2013\/09\/error-less.png\" \/>\n<meta name=\"author\" content=\"Luis Rodriguez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@luizmirodriguez\" \/>\n<meta name=\"twitter:site\" content=\"@luizmirodriguez\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Luis Rodriguez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/\"},\"author\":{\"name\":\"Luis Rodriguez\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\"},\"headline\":\"Comenzar con el pre procesador LESS\",\"datePublished\":\"2013-09-10T03:31:30+00:00\",\"dateModified\":\"2013-10-24T21:57:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/\"},\"wordCount\":509,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/blog.luisrodriguez.pe\/wp-content\/uploads\/2013\/09\/error-less.png\",\"articleSection\":[\"CSS3\",\"Desarrollo web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/\",\"name\":\"Comenzar con el pre procesador LESS - Blog Luis Rodriguez\",\"isPartOf\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/blog.luisrodriguez.pe\/wp-content\/uploads\/2013\/09\/error-less.png\",\"datePublished\":\"2013-09-10T03:31:30+00:00\",\"dateModified\":\"2013-10-24T21:57:53+00:00\",\"author\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\"},\"breadcrumb\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/#primaryimage\",\"url\":\"http:\/\/blog.luisrodriguez.pe\/wp-content\/uploads\/2013\/09\/error-less.png\",\"contentUrl\":\"http:\/\/blog.luisrodriguez.pe\/wp-content\/uploads\/2013\/09\/error-less.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/luisrodriguez.pe\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Comenzar con el pre procesador LESS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#website\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/\",\"name\":\"Blog Luis Rodriguez\",\"description\":\"Analytics Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/luisrodriguez.pe\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\",\"name\":\"Luis Rodriguez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"caption\":\"Luis Rodriguez\"},\"description\":\"Hola, Soy Luis Rodriguez, radico en Lima \u2013 Per\u00fa, formado en una carrera inform\u00e1tica, desempe\u00f1ando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi inter\u00e9s en la Anal\u00edtica Web me ayud\u00f3 mucho entender el funcionamiento interno de las herramientas de anal\u00edtica, con las que vengo trabajo activamente desde 2017. Linkedin\",\"sameAs\":[\"http:\/\/luisrodriguez.pe\"],\"url\":\"https:\/\/luisrodriguez.pe\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comenzar con el pre procesador LESS - Blog Luis Rodriguez","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/","og_locale":"es_ES","og_type":"article","og_title":"Comenzar con el pre procesador LESS - Blog Luis Rodriguez","og_description":"LESS es un pre procesador din\u00e1mico de css que nos permite programar \u00a0en \u00a0CSS con variables, funciones, operaciones matem\u00e1ticas, etc asi haciendo mas interesante el desarrollo para los front end. LESS no es el \u00fanico pre procesador que podemos usar ahi tenemos a \u00a0Stylus y SASS\u00a0que tambien estan buenos pero por que mi preferencia a[...]","og_url":"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/","og_site_name":"Blog Luis Rodriguez","article_publisher":"https:\/\/www.facebook.com\/luisrodriguez.pe","article_published_time":"2013-09-10T03:31:30+00:00","article_modified_time":"2013-10-24T21:57:53+00:00","og_image":[{"url":"http:\/\/blog.luisrodriguez.pe\/wp-content\/uploads\/2013\/09\/error-less.png","type":"","width":"","height":""}],"author":"Luis Rodriguez","twitter_card":"summary_large_image","twitter_creator":"@luizmirodriguez","twitter_site":"@luizmirodriguez","twitter_misc":{"Escrito por":"Luis Rodriguez","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/#article","isPartOf":{"@id":"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/"},"author":{"name":"Luis Rodriguez","@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c"},"headline":"Comenzar con el pre procesador LESS","datePublished":"2013-09-10T03:31:30+00:00","dateModified":"2013-10-24T21:57:53+00:00","mainEntityOfPage":{"@id":"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/"},"wordCount":509,"commentCount":0,"image":{"@id":"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/#primaryimage"},"thumbnailUrl":"http:\/\/blog.luisrodriguez.pe\/wp-content\/uploads\/2013\/09\/error-less.png","articleSection":["CSS3","Desarrollo web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/","url":"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/","name":"Comenzar con el pre procesador LESS - Blog Luis Rodriguez","isPartOf":{"@id":"https:\/\/luisrodriguez.pe\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/#primaryimage"},"image":{"@id":"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/#primaryimage"},"thumbnailUrl":"http:\/\/blog.luisrodriguez.pe\/wp-content\/uploads\/2013\/09\/error-less.png","datePublished":"2013-09-10T03:31:30+00:00","dateModified":"2013-10-24T21:57:53+00:00","author":{"@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c"},"breadcrumb":{"@id":"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/#primaryimage","url":"http:\/\/blog.luisrodriguez.pe\/wp-content\/uploads\/2013\/09\/error-less.png","contentUrl":"http:\/\/blog.luisrodriguez.pe\/wp-content\/uploads\/2013\/09\/error-less.png"},{"@type":"BreadcrumbList","@id":"https:\/\/luisrodriguez.pe\/blog\/comenzar-con-pre-procesadores-de-css-less\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/luisrodriguez.pe\/blog\/"},{"@type":"ListItem","position":2,"name":"Comenzar con el pre procesador LESS"}]},{"@type":"WebSite","@id":"https:\/\/luisrodriguez.pe\/blog\/#website","url":"https:\/\/luisrodriguez.pe\/blog\/","name":"Blog Luis Rodriguez","description":"Analytics Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/luisrodriguez.pe\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c","name":"Luis Rodriguez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","caption":"Luis Rodriguez"},"description":"Hola, Soy Luis Rodriguez, radico en Lima \u2013 Per\u00fa, formado en una carrera inform\u00e1tica, desempe\u00f1ando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi inter\u00e9s en la Anal\u00edtica Web me ayud\u00f3 mucho entender el funcionamiento interno de las herramientas de anal\u00edtica, con las que vengo trabajo activamente desde 2017. Linkedin","sameAs":["http:\/\/luisrodriguez.pe"],"url":"https:\/\/luisrodriguez.pe\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/comments?post=334"}],"version-history":[{"count":15,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/334\/revisions"}],"predecessor-version":[{"id":346,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/334\/revisions\/346"}],"wp:attachment":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/media?parent=334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/categories?post=334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/tags?post=334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}