{"id":579,"date":"2013-07-25T16:53:11","date_gmt":"2013-07-25T16:53:11","guid":{"rendered":"http:\/\/maquetando.com\/?p=579"},"modified":"2013-07-25T21:43:14","modified_gmt":"2013-07-25T21:43:14","slug":"convertier-archivos-less-a-css","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/convertier-archivos-less-a-css\/","title":{"rendered":"Convertir archivos Less a CSS"},"content":{"rendered":"<p>Cuando trabajamos con archivos .less \u00a0y nuestro proyecto esta listo para ser publicado , \u00a0 es recomendable \u00a0 convertir este tipo de archivos a CSS para mejorar el rendimiento de carga de nuestras paginas \u00a0.<\/p>\n<p>Muchos editores de c\u00f3digo \u00a0ya disponen de herramientas para realizar esta tarea.<\/p>\n<h2><strong>SublimeText\u00a0<\/strong><\/h2>\n<p><a href=\"http:\/\/maquetando.com\/wp-content\/uploads\/2013\/07\/sublime_less.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-581\" alt=\"sublime_less\" src=\"http:\/\/maquetando.com\/wp-content\/uploads\/2013\/07\/sublime_less.jpg\" width=\"712\" height=\"533\" srcset=\"https:\/\/orpot.com\/blog\/wp-content\/uploads\/2013\/07\/sublime_less.jpg 712w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2013\/07\/sublime_less-600x449.jpg 600w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2013\/07\/sublime_less-300x224.jpg 300w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2013\/07\/sublime_less-82x60.jpg 82w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2013\/07\/sublime_less-65x50.jpg 65w\" sizes=\"(max-width: 712px) 100vw, 712px\" \/><\/a><\/p>\n<p>Para compilar Less a CSS abrimos <em><strong>PackageControl:InstallPackage<\/strong> <\/em>y buscamos el plugin <a href=\"https:\/\/github.com\/berfarah\/LESS-build-sublime\" target=\"_blank\"><em>LESS-build<\/em> <\/a>, una vez instalado reiniciamos nuestro editor .<\/p>\n<p>Abrimos nuestro archivo .less vamos a \u00a0<strong>Tools &gt; Build<\/strong> \u00a0y \u00a0SublimeText se encargara de crear o reescribir el archivo CSS en la misma carpeta donde se encuentra nuestro archivo .less<\/p>\n<p>Muy f\u00e1cil.<\/p>\n<h2>SimpleLess<strong><\/strong><\/h2>\n<p><a href=\"http:\/\/maquetando.com\/wp-content\/uploads\/2013\/07\/simple_less.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-582\" alt=\"simple_less\" src=\"http:\/\/maquetando.com\/wp-content\/uploads\/2013\/07\/simple_less.jpg\" width=\"708\" height=\"527\" srcset=\"https:\/\/orpot.com\/blog\/wp-content\/uploads\/2013\/07\/simple_less.jpg 708w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2013\/07\/simple_less-600x447.jpg 600w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2013\/07\/simple_less-300x223.jpg 300w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2013\/07\/simple_less-82x60.jpg 82w\" sizes=\"(max-width: 708px) 100vw, 708px\" \/><\/a><\/p>\n<p>SimpleLess es un programa que se puede ejecutar \u00a0 en Windows y OSx \u00a0muy f\u00e1cil de usar para compilar archivos LESS a CSS , el procedimiento es muy simple :<\/p>\n<ol>\n<li>Descargamos<a href=\"http:\/\/wearekiss.com\/simpless\" target=\"_blank\"> SimpleLess<\/a><\/li>\n<li>Extraemos la carpeta completa \u00a0y ejecutamos el archivo de la aplicaci\u00f3n SimpleLess.exe (Win)<\/li>\n<li>Nos abrir\u00e1 una ventana que nos indica que arrastremos nuestro archivo .less<\/li>\n<li>Arrastramos nuestro archivo a la ventana \u00a0y listo.<\/li>\n<li>SimpleLess generara un archivo .css con el mismo nombre \u00a0a partir de nuestro archivo .less \u00a0que sera guardado en la carpeta donde se encuentre este ultimo, pero \u00a0tambi\u00e9n nos da la opci\u00f3n de guardarlo en una carpeta especifica.<\/li>\n<\/ol>\n<h2>Crunch<\/h2>\n<p><a href=\"http:\/\/maquetando.com\/wp-content\/uploads\/2013\/07\/crunch.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-601\" alt=\"crunch\" src=\"http:\/\/maquetando.com\/wp-content\/uploads\/2013\/07\/crunch.jpg\" width=\"708\" height=\"527\" srcset=\"https:\/\/orpot.com\/blog\/wp-content\/uploads\/2013\/07\/crunch.jpg 708w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2013\/07\/crunch-600x447.jpg 600w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2013\/07\/crunch-300x223.jpg 300w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2013\/07\/crunch-82x60.jpg 82w\" sizes=\"(max-width: 708px) 100vw, 708px\" \/><\/a><\/p>\n<p>Crunch es una app desarrollada en AIR, mas que un simple convertidor , es un editor donde podemos crear directamente nuestros archivos less y editarlos.<\/p>\n<p>Su uso es muy f\u00e1cil , solo instalamos la aplicaci\u00f3n abrimos un archivo \u00a0(o creamos uno nuevo) \u00a0 .less , \u00a0vamos al enu principal \u00a0buscamos la opci\u00f3n \u00a0File &gt;Crunch! , esto \u00a0se encargara de crear el archivo css.<\/p>\n<p>Existen \u00a0mas herramientas y plugins para otros editores como NetBeans , Eclipse , Komodo IDE, Aptana \u00a0 etc. en otro \u00a0post veremos cada uno de ellos.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando trabajamos con archivos .less \u00a0y nuestro proyecto esta listo para ser publicado , \u00a0&hellip;<\/p>\n","protected":false},"author":1,"featured_media":587,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47],"tags":[51,52],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/579"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=579"}],"version-history":[{"count":17,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/579\/revisions"}],"predecessor-version":[{"id":588,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/579\/revisions\/588"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media\/587"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}