{"id":12,"date":"2013-01-09T13:10:20","date_gmt":"2013-01-09T13:10:20","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/?p=12"},"modified":"2018-10-27T21:15:16","modified_gmt":"2018-10-27T20:15:16","slug":"preprocesadores","status":"publish","type":"post","link":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/software\/preprocesadores\/","title":{"rendered":"Preprocesadores"},"content":{"rendered":"<p>[\u00daltima edici\u00f3n: 27\/10\/2018]<\/p>\n<p>CSS es un lenguaje extremadamente \u00fatil pero limitado. No dispone de capacidades que ser\u00edan muy interesantes, como el uso de variables o la posibilidad de hacer operaciones matem\u00e1ticas b\u00e1sicas o reutilizar c\u00f3digo con comodidad. Eso es as\u00ed por una serie de decisiones que se tomaron en su creaci\u00f3n. Para paliar esas limitaciones para los dise\u00f1adores y desarrolladores que lo deseen, existen los <strong>preprocesadores<\/strong>, programas que permiten escribir nuestras hojas de estilo usando las caracter\u00edsticas que hemos comentado, y otras, en un lenguaje algo m\u00e1s complejo que CSS y que despu\u00e9s &#8216;compilan&#8217; o procesan esas hojas de estilo a CSS convencional que podemos servir al navegador. En ocasiones, junto con el preprocesador tenemos conjuntos de herramientas que nos facilitan el trabajo (se encargan, por ejemplo, de que su uso se vuelva transparente, compilando autom\u00e1ticamente cada vez que hacemos un cambio en el c\u00f3digo).<\/p>\n<p>Dos buenos documentos que defienden el uso de preprocesadores son <a title=\"Ten Reasons You Should Be Using a CSS Preprocessor | Urban Insight Blog\" href=\"https:\/\/raygun.com\/blog\/10-reasons-css-preprocessor\/\">Ten Reasons to Use a CSS Preprocessor in 2018<\/a> (mayo de 2018) y <a href=\"http:\/\/alistapart.com\/article\/why-sass\">Why Sass<\/a> (<cite lang=\"en\">A List Apart<\/cite>, noviembre de 2013).<\/p>\n<p><a title=\"How to Choose the Right CSS Preprocessor - Treehouse Blog\" href=\"http:\/\/blog.teamtreehouse.com\/how-to-choose-the-right-css-preprocessor\">How to Choose the Right CSS Preprocessor<\/a> (noviembre de 2012).<\/p>\n<p>Probablemente, ahora mismo el preprocesador m\u00e1s popular sea <a title=\"Sass - Syntactically Awesome Stylesheets\" href=\"http:\/\/sass-lang.com\/\">Sass<\/a>. Ten\u00e9is una introducci\u00f3n a su funcionamiento en <a href=\"http:\/\/www.sitepoint.com\/getting-started-with-sass\/\">Getting Started with Sass<\/a> (<cite>Sitepoint<\/cite>, marzo de 2013).<\/p>\n<p>De todas formas, existen otros preprocesadores, y todos presentan sus ventajas e inconvenientes:<\/p>\n<ul>\n<li><a href=\"http:\/\/lesscss.org\/\">LESS<\/a>. (<a href=\"http:\/\/winless.org\/online-less-compiler\">Online LESS Compiler<\/a>. <a href=\"http:\/\/winless.org\/\">WinLess<\/a>. <a href=\"http:\/\/lessprefixer.com\/\">LESS Prefixer<\/a>. <a href=\"https:\/\/getcrunch.co\/\">Crunch<\/a>. <a href=\"http:\/\/wearekiss.com\/simpless\">SimpLESS<\/a>.)<\/li>\n<li><a href=\"http:\/\/learnboost.github.io\/stylus\/\">Stylus<\/a>.<\/li>\n<li><a href=\"http:\/\/www.raincreativelab.com\/rcss\/\">RCSS<\/a>.<\/li>\n<li><a href=\"http:\/\/roole.org\/\">ROOLE<\/a>.<\/li>\n<li><a href=\"https:\/\/postcss.org\/\">PostCSS<\/a>.<\/li>\n<li><a href=\"http:\/\/the-echoplex.net\/csscrush\/\">CSS-Crush<\/a>.<\/li>\n<\/ul>\n<p>Una buena herramienta para el trabajo con Sass, LESS y Stylus es <a title=\"Prepros :: Compile Sass, less or any preprocessing language\" href=\"https:\/\/prepros.io\">Prepros<\/a>, que adem\u00e1s dispone de versiones para Windows, Mac OS X y Linux.<\/p>\n<p>Y, finalmente, un art\u00edculo de enero de 2018 que nos tendr\u00eda que hacer reflexionar: <a href=\"https:\/\/codeburst.io\/do-you-really-need-the-preprocessor-use-css-variables-instead-582dacad4b8c\">Do you really need a Preprocessor? Use CSS variables instead<\/a>. Sin embargo primero tendremos que <a href=\"https:\/\/caniuse.com\/#feat=css-variables\">comprobar si las variables CSS ya se pueden utilizar<\/a> en los diferentes navegadores.<\/p>","protected":false},"excerpt":{"rendered":"<p>[\u00daltima edici\u00f3n: 27\/10\/2018] CSS es un lenguaje extremadamente \u00fatil pero limitado. No dispone de capacidades que ser\u00edan muy interesantes, como el uso de variables o la posibilidad de hacer operaciones matem\u00e1ticas b\u00e1sicas o reutilizar c\u00f3digo con comodidad. Eso es as\u00ed por una serie de decisiones que se tomaron en su creaci\u00f3n. Para paliar esas limitaciones &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/software\/preprocesadores\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abPreprocesadores\u00bb<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,2],"tags":[],"class_list":["post-12","post","type-post","status-publish","format-standard","hentry","category-css","category-software","entry"],"_links":{"self":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":30,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/12\/revisions"}],"predecessor-version":[{"id":499,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/12\/revisions\/499"}],"wp:attachment":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/media?parent=12"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/categories?post=12"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/tags?post=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}