{"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\/ca\/software\/preprocesadores\/","title":{"rendered":"Preprocessadors"},"content":{"rendered":"<p>[Darrera edici\u00f3: 27\/10\/2018]<\/p>\n<p>CSS \u00e9s un llenguatge extremadament \u00fatil per\u00f2 limitat. No disposa de capacitats que serien molt interessants, com ara l&#8217;\u00fas de variables o la possibilitat de fer operacions matem\u00e0tiques b\u00e0siques o reutilitzar codi amb comoditat. Aix\u00f2 \u00e9s aix\u00ed per una s\u00e8rie de decisions que es van prendre en la seva creaci\u00f3. Per pal\u00b7liar aquestes limitacions per als dissenyadors i desenvolupadors que ho desitgin, hi ha els <strong>preprocessadors<\/strong>, programes que permeten escriure els nostres fulls d&#8217;estil usant les caracter\u00edstiques que hem comentat, i d&#8217;altres, en un llenguatge una mica m\u00e9s complex que CSS i que despr\u00e9s &#8216;compilen&#8217; o processen aquests fulls d&#8217;estil a CSS convencional que podem servir al navegador. De vegades, juntament amb el preprocessador tenim conjunts d&#8217;eines que ens faciliten la feina (s&#8217;encarreguen, per exemple, que el seu \u00fas es torni transparent, compilant autom\u00e0ticament cada vegada que fem un canvi en el codi).<\/p>\n<p>Dos bons documents que defensen l&#8217;\u00fas de preprocessadors s\u00f3n <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> (maig de 2018) i <a href=\"http:\/\/alistapart.com\/article\/why-sass\">Why Sass<\/a> (<cite lang=\"en\">A List Apart<\/cite>, novembre 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> (novembre de 2012).<\/p>\n<p>Probablement, ara mateix el preprocessador m\u00e9s popular sigui <a title=\"Sass - Syntactically Awesome Stylesheets\" href=\"http:\/\/sass-lang.com\/\">Sass<\/a>. Teniu una introducci\u00f3 al seu funcionament a <a href=\"http:\/\/www.sitepoint.com\/getting-started-with-sass\/\">Getting Started with Sass<\/a> (<cite>Sitepoint<\/cite>, mar\u00e7 de 2013).<\/p>\n<p>En qualsevol cas, existeixen d&#8217;altres preprocessadors, i tots presenten avantatges i inconvenients:<\/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=\"http:\/\/crunchapp.net\/\">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 bona eina per a treballar amb Sass, LESS i Stylus \u00e9s <a title=\"Prepros :: Compile Sass, less or any preprocessing language\" href=\"https:\/\/prepros.io\">Prepros<\/a>, que disposa de versions per a Windows, Mac OS X i Linux.<\/p>\n<p>I, finalment, un article del gener de 2018 que ens hauria de fer 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>. Tanmateix primer haurem de <a href=\"https:\/\/caniuse.com\/#feat=css-variables\">comprovar si les variables CSS ja es poden utilitzar<\/a> en els diferents navegadors.<\/p>","protected":false},"excerpt":{"rendered":"<p>[Darrera edici\u00f3: 27\/10\/2018] CSS \u00e9s un llenguatge extremadament \u00fatil per\u00f2 limitat. No disposa de capacitats que serien molt interessants, com ara l&#8217;\u00fas de variables o la possibilitat de fer operacions matem\u00e0tiques b\u00e0siques o reutilitzar codi amb comoditat. Aix\u00f2 \u00e9s aix\u00ed per una s\u00e8rie de decisions que es van prendre en la seva creaci\u00f3. Per pal\u00b7liar &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/software\/preprocesadores\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Preprocessadors&#8221;<\/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\/ca\/wp-json\/wp\/v2\/posts\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":30,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/12\/revisions"}],"predecessor-version":[{"id":499,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/12\/revisions\/499"}],"wp:attachment":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/media?parent=12"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/categories?post=12"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/tags?post=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}