Un programador web que se respete sabe que CSS se vuelve el pan que acompaña cada comida en el desarrollo de un proyecto web, incluso podrá pasar gran parte de su tiempo de desarrollo escribiendo líneas de código que cumplan el cometido de hacer agradable a la vista su página web.
Existen, por supuesto, proyectos más grandes y complejos que otros y sí en algún momento te ha tocado hundirte en hojas de estilo complejas, habrás notado que, llegado el momento, CSS puede ser un verdadero dolor de cabeza. Es por esto mismo que te presento SASS (Syntactically Awesome Style Sheets), tu próximo mejor amigo durante tus jornadas de desarrollo web.
¿Qué es?
Se trata de un metalenguaje que funciona como una extensión de CSS. Como seguramente sabrás CSS no es propiamente un lenguaje de programación, por lo que sus funciones son limitadas, lo que normalmente puede terminar en líneas y líneas de código bastante repetitivo (muchos de nosotros terminamos incluso aprendiéndonos el número hexadecimal de más de un color). Para acabar con esto, y cumplir con el DRY (Don’t Repet Yourself), puedes usar esta sencilla herramienta que te ofrece más de una característica que seguramente habías deseado que existiera en CSS.
Sintaxis
SASS ofrece dos tipos de sintaxis. La primera es conocida como SCSS (Sassy CSS), esta es la hermana de CSS3, por lo que si prefieres trabajar con las nuevas tecnologías te recomiendo mucho esta opción. Así mismo, es importante señalar que es compatible con los exploradores que permiten CSS3 y te permitirá lidiar con dolores de cabeza (mejor conocido como Explorer) casi sin problemas, incluso en algunas versiones antiguas. Ahora que si lo que buscas es simplicidad a la hora de escribir tu código, puedes usar la sintaxis SASS. Ésta más parecida a lo que venimos haciendo con CSS, además suele ser la favorita de muchos por ser muy sencilla de entender.
Algunas de las características nuevas que ofrece SASS son:
Variables
Así es, ¡las variables han llegado a CSS! Es muy común (y correcto gráficamente) que una página web tenga de 2 a 5 colores determinados, así como una fuente, márgenes, tamaño de imágenes, etc. En una hoja de estilo tradicional tendrías que repetir estos parámetros una y otra vez, pero con SASS sólo deberás crear una variable y usarla como lo harías en cualquier lenguaje de programación. Declarar variables es muy sencillo, sólo basta con anteponer un $ al nombre de la variable seguido por : y su valor. Aquí un ejemplo:
En SCSS
$fuente_titulos: Arial;
$color_titulos: # 20cfda;
body{
font: $fuente_titulos;
color: $color_titulos;
}
En SASS
$fuente_titulos: Arial
$color_titulos: # 20cfda
body
font: $fuente_titulos
color: $color_titulos
Este es un ejemplo sencillo a modo de explicación, pero los usos de esta característica pueden ser muy extensos, por ejemplo, puedes establecer el ancho y alto de un div flotante:
$ancho_div:500px;
$alto_div: $ancho_div * 2;
Anidamiento
En HTML resulta sencillo y hasta cómodo escribir en una jerarquía anidada, con SCSS podemos usar la misma estructura de este principio de modo que el código anidado puede ser insertado dentro de cualquier otro bloque de código.
En SCSS
nav{
ul{
margin: 0;
list-style: none;
}
li{ display: inline-block; }
a{
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
En SASS
nav
ul
margin: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
En este ejemplo ul, li y a se encuentran anidados dentro de nav, de esta manera el código es más organizado y fácil de leer.
Mixins
Se trata de un objeto especial que permite tomar bloques completos de código para reutilizarlos. Esto es de gran ayuda cuando tenemos esas hojas de estilo especialmente largas y repetitivas. Un ejemplo podría ser el siguiente:
@mixin hide-text{
overflow: hidden;
text-indent: -9000px;
display:block;
}
Ahora podemos usarlo de la siguiente forma:
.logo{
background: url(“logo.png”);
height:100px;
width:200px
@include hide-text;
}
De esta forma tenemos un efecto que podemos usar en más de una imagen con solo llamar al mixim. Muy práctico.
Herencia
También llamado @extend, es una característica que, después de familiarizarte con ella, te encantará. Se trata de utilizar el estilo de algun objeto previamente escrito, cambiando sólo aquello que queramos modificar. Te ahorrará mucho tiempo, más si aprendes a usarlo con cierto orden.
.mensaje1 {
border: 1px #fdd;
color: # 004966;
}
.mensaje2{
@extend .mensaje1;
font-size:large;
}
Parciales
Un concepto que te será muy familiar. Se trata de crear un archivo que contenga un bloque de código para mandarlo a llamar dentro de tu código SCSS. Este archivo se identifica por un gión bajo al inicio de su nombre, por ejemplo: _partial.scss. SASS compilará el partial sólo cuando sea llamado dentro de otro archivo .scss
Y mucho más…
Aparte de estas hay otras características que te ayudarán en el desarrollo de tus páginas web con SASS, una vez que lo tengas dominado podrás ahorrar tiempo y esfuerzo en páginas especialmente grandes. Para obtener más información de cómo usar esta potente herramienta visita su página oficial: http://sass-lang.com/
