SASS – Por qué utilizar este preprocesador CSS

En esta primera entrada dedicada a NET me gustaría hablar sobre SASS y las ventajas que éste nos ofrece con respecto a las hojas de estilo en cascada convencionales.

¿Qué es SASS?

Antes de saber el por qué utilizar SASS es necesario saber qué es exactamente: SASS es un preprocesador CSS que, como su propio nombre indica, preprocesa un archivo con una sintaxis propia y extensión .scss para convertirlo en un fichero de hoja de estilo CSS convencional.

Te estarás preguntando: ¿Y si lo que obtenemos es un fichero .css convencional, por qué utilizarlo?

Sigue leyendo y te lo mostraré.

¿Qué ventajas nos aporta?

Voy a tratar de resumir las más importantes ventajas que nos ofrece SASS:

Anidamiento

Nos permite anidar clases unas dentro de las otras, lo que nos evitar tener que reescribirlas continuamente y poder ahorrar tiempo, agilizar nuestro trabajo y tener un código más organizado.
Además también podemos hacer uso del carácter & para el anidamiento de pseudoclases.

Veamos un ejemplo de como nos permite SASS anidar clases y propiedades comparándolo con las hojas de estilo en cascada convencionales:

[css title=”Código SASS”]
.contenido {
background: #ccc;
a {
color: #f00;
&:hover {
font-weight: bold;
}
}
}
[/css]

[css title=”Código CSS”]
.contenido {
background: #ccc;
}
.contenido a {
color: #f00;
}
.contenido a:hover {
font-weight: bold;
}
[/css]

Variables

En muchas ocasiones aplicaremos un mismo valor a varias propiedades a lo largo de nuestro proyecto, es por eso que podemos hacer uso de variables para guardar esos valores:

[css title=”Código SASS”]
$color: #333;
.contenido {
p {
color: $color;
border: 1px solid $color;
}
}
[/css]

Extensiones

Otra de las ventajas que nos ofrece SASS es la posibilidad de extender propiedades entre clases. Veamos un ejemplo de una extensión en SASS y el código CSS resultante de este primero:

[css title=”Código SASS”]
.elemento1 {
text-decoration: underline;
}
.elemento2 {
@extend .elemento1;
color: #f00;
}
[/css]

[css title=”Código CSS”]
.elemento1, .elemento2 {
text-decoration: underline;
}
.elemento2 {
color: #f00;
}
[/css]

Mixins

Son agrupaciones de propiedades que luego se nos permiten aplicar en bloque; muy útil, por ejemplo, para agrupar propiedades aplicables a diferentes navegadores. Además podemos hacer uso de argumentos para reutilizar nuestro código con diferentes valores. Veamos un ejemplo:

[css title=”Código SASS”]
@mixin border-radius ($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
img.redonda {
@include border-radius(10px);
}
[/css]

Quiero saber más

Hay muchas otras ventajas que se nos ofrecen con este preprocesador CSS, para ello puedes consultar toda la documentación sobre SASS en su página oficial, en ella encontrarás absolutamente toda la información sobre lo que que SASS nos ofrece.

Tweet about this on TwitterShare on FacebookShare on LinkedIn