{"id":103,"date":"2015-05-05T15:18:29","date_gmt":"2015-05-05T15:18:29","guid":{"rendered":"http:\/\/www.cti.com.py\/blog\/?p=103"},"modified":"2017-08-23T23:49:52","modified_gmt":"2017-08-24T03:49:52","slug":"que-es-sass-y-less","status":"publish","type":"post","link":"http:\/\/cti.com.py\/blog\/que-es-sass-y-less\/","title":{"rendered":"\u00bfQu\u00e9 es SASS y LESS?"},"content":{"rendered":"<p>El <strong>SASS<\/strong> y <strong>LESS<\/strong> son lenguajes que son como un s\u00faper conjunto de <strong>CSS<\/strong>, estos a\u00f1aden nuevas funcionalidades al CSS, como anidamiento de reglas, introducci\u00f3n de variables y mixins.<\/p>\n<p>Estos lenguajes de estilo no pueden ser interpretados por los navegadores, para poder utilizarlos se necesita una librer\u00eda JavaScript para que interprete el estilo, tambi\u00e9n es posible compilar el c\u00f3digo en CSS.<\/p>\n<p>En este art\u00edculo quiero mostrarles algunos ejemplos sencillos de c\u00f3mo ser\u00eda el c\u00f3digo con las caracter\u00edsticas para poder comparar el LESS y SASS con CSS y as\u00ed tener una idea de la utilidad de estos.<\/p>\n<h2>Anidamiento<\/h2>\n<p>Si quisiesemos dar estilo a \u2018h1\u2032, \u2018p\u2019 y \u2018a\u2019 del header con CSS lo podr\u00edamos hacer as\u00ed:<\/p>\n<pre>\/* Compiled CSS *\/\r\n#header h1 {\r\n font-size: 26px;\r\n font-weight: bold;\r\n}\r\n#header p {\r\n font-size: 12px;\r\n}\r\n#header p a {\r\n text-decoration: none;\r\n}\r\n#header p a:hover {\r\n border-width: 1px;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>En cambio con SASS y con LESS podemos hacer uso de anidamiento:<\/p>\n<pre>#header {\r\n h1 {\r\n font-size: 26px;\r\n font-weight: bold;\r\n }\r\n p { font-size: 12px;\r\n a { text-decoration: none;\r\n &amp;amp;:hover { border-width: 1px }\r\n }\r\n }\r\n}<\/pre>\n<p>Esto es un sencillo ejemplo, pero quienes hayan trabajado con CSS pronto se dar\u00e1n cuenta de la potencia que tiene esta peque\u00f1a funcionalidad.<\/p>\n<h2>Variables<\/h2>\n<p>Otra ventaja interesante de estos lenguajes es la de poder definir variables. Imagina que tienes un estilo ya realizado y que solo quieres cambiar el color del texto de toda una p\u00e1gina web. Posiblemente tengas asignado el color que quieres sustituir en muchos sitios. Si hubi\u00e9semos podido definir una variable, simplemente con cambiar el valor de esa variable tendr\u00edamos los cambios realizados, y eso tambi\u00e9n nos lo permiten LESS y SASS. Veamos un ejemplo:<\/p>\n<pre>\/\/ SASS\r\n \r\n\/\/ Con SASS definimos las variables antecediendo el\r\n\/\/ nombre de la variable con el signo '$'\r\n$color: #4D926F;\r\n#header {\r\n color: $color;\r\n}\r\nh2 {\r\n color: $color;&lt;\r\n}\r\n\r\n\r\n<\/pre>\n<pre> \r\n\/\/ LESS\r\n\/\/ Con LESS definimos las variables antecediendo el&lt;br \/&gt;\r\n\/\/ nombre de la variable con el signo '@'\r\n@color: #4D926F;\r\n#header {\r\n color: @color;\r\n}\r\nh2 {\r\n color: @color;\r\n}\r\n\r\n\r\n<\/pre>\n<h2>Mixins<\/h2>\n<p>Los mixins te permiten insertar todas las propiedades de una clase en otra clase, simplemente tienes que introducir el nombre de la clase como una de las propiedades. Los mixins pueden ser tambi\u00e9n como funciones, y tomar argumentos, como se ve en el ejemplo de abajo.<\/p>\n<pre>\/\/ SASS\r\n@mixin rounded-corners ($radius: 5px) {\r\n -webkit-border-radius: $radius;\r\n -moz-border-radius: $radius;\r\n -ms-border-radius: $radius;\r\n -o-border-radius: $radius;\r\n border-radius: $radius;\r\n}\r\n#header {\r\n @include rounded-corners;\r\n}\r\n#footer {\r\n @include rounded-corners(10px);\r\n}\r\n\r\n \r\n\/\/ LESS\r\n.rounded-corners (@radius: 5px) {\r\n -webkit-border-radius: @radius;\r\n -moz-border-radius: @radius;\r\n -ms-border-radius: @radius;\r\n -o-border-radius: @radius;\r\n border-radius: @radius;\r\n}\r\n#header {\r\n .rounded-corners;\r\n}\r\n#footer {\r\n .rounded-corners(10px);\r\n}<\/pre>\n<p>En ambos casos el CSS resultante ser\u00eda el siguiente<\/p>\n<pre>\/* Compiled CSS *\/\r\n#header {\r\n -webkit-border-radius: 5px;\r\n -moz-border-radius: 5px;\r\n -ms-border-radius: 5px;\r\n -o-border-radius: 5px;\r\n border-radius: 5px;\r\n}\r\n#footer {\r\n -webkit-border-radius: 10px;\r\n -moz-border-radius: 10px;\r\n -ms-border-radius: 10px;\r\n -o-border-radius: 10px;\r\n border-radius: 10px;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El SASS y LESS son lenguajes que son como un s\u00faper conjunto de CSS, estos a\u00f1aden nuevas funcionalidades al CSS, como anidamiento de reglas, introducci\u00f3n de variables y mixins. Estos lenguajes de estilo no pueden ser interpretados por los navegadores, para poder utilizarlos se necesita una librer\u00eda JavaScript para que interprete el estilo, tambi\u00e9n es &hellip; <a href=\"http:\/\/cti.com.py\/blog\/que-es-sass-y-less\/\" class=\"more-link\">Continuar leyendo<span class=\"screen-reader-text\"> \u00ab\u00bfQu\u00e9 es SASS y LESS?\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":214,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[66,19,64,65],"class_list":["post-103","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo-web","tag-css","tag-desarrollo-web","tag-less","tag-sass"],"_links":{"self":[{"href":"http:\/\/cti.com.py\/blog\/wp-json\/wp\/v2\/posts\/103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/cti.com.py\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/cti.com.py\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/cti.com.py\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/cti.com.py\/blog\/wp-json\/wp\/v2\/comments?post=103"}],"version-history":[{"count":1,"href":"http:\/\/cti.com.py\/blog\/wp-json\/wp\/v2\/posts\/103\/revisions"}],"predecessor-version":[{"id":105,"href":"http:\/\/cti.com.py\/blog\/wp-json\/wp\/v2\/posts\/103\/revisions\/105"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/cti.com.py\/blog\/wp-json\/wp\/v2\/media\/214"}],"wp:attachment":[{"href":"http:\/\/cti.com.py\/blog\/wp-json\/wp\/v2\/media?parent=103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/cti.com.py\/blog\/wp-json\/wp\/v2\/categories?post=103"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/cti.com.py\/blog\/wp-json\/wp\/v2\/tags?post=103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}