Beneficios de los pre-procesadores de CSS

por Natalia Ventre el 24/05/2013 ・ podés leerlo en 4 minutos ・

¿Para qué usar un pre-procesador de CSS?1 Para escribir y mantener código CSS más rápido y con menor esfuerzo. ¿Cómo se logra esto?

Organizando mejor el código. Los pre-procesadores de CSS te permite anidar selectores, por ej. agrupar los distintos estados de los enlaces. Con un gran poder viene una gran responsabilidad. Un nivel profundo de anidación (más de 4), conlleva problemas de mantenimiento2.

a{
	text-decoration: none;

	&:hover{
		text-decoration: underline;
	}
}

Usando variables. En vez “buscar y reemplazar” para cambiar por ej. un color, lo podés definir como variable. Es particularmente útil si diseñás en el navegador.

$colorAcento: #009B77;

blockquote{
	border-left: 5px solid $colorAcento;
}

Reutilizando código. Los mixins y los placeholders selectors te permiten re-utilizar bloques de código.

@mixin transicion($propiedad, $duracion:0.3s, $tweening:ease-out){
	-webkit-transition: $propiedad $duracion $tweening;
	-moz-transition: $propiedad $duracion $tweening;
	-o-transition: $propiedad $duracion $tweening;
	transition: $propiedad $duracion $tweening;
}

a{
	@include transicion(color, 0.5s);
}
%tiene-borde{
	border-bottom: 1px solid #eee;
	margin-bottom: 1em;
	padding-bottom: 1em;
}

.item-lista{
	@extend %tiene-borde;
}

Haciendo operaciones. En vez de usar la calculadora y explicar en un comentario de dónde sacaste ese número, podés hacer la cuenta directamente.

$ritmo-vertical: 0.5em;

h1{
	margin-bottom: $ritmo-vertical * 4;
}

h1{
	margin-bottom: $ritmo-vertical * 2;
}

Usando funciones. Por ej. para un degradé o para diferentes estados de un botón o enlace, necesitás variantes de un color, hexadecimal no es un sistema particularmente intuitivo, así que en vez de usar una aplicación para elegir los colores, podés pedirle al pre-procesador un color más claro, oscuro, transparente o saturado.

$negro: #2C3E50;

.navbar{
	background-image: linear-gradient(to bottom, $negro, ligthen($negro, 10%));
}

Comentando el código. Nunca fui amiga de incluir comentarios en los archivos CSS, porque cualquiera puede verlos, pero con los pre-procesadores, tenés 2 tipos de comentarios, los clásicos que se incluyen en la compilación a CSS y los estilo JavaScript que quedan sólo en el archivo original, más privados, para vos mismo y tus compañeros de trabajo.

.btn{
	// Falta el resto de los prefijos. Usar un mixin!
	background-image: linear-gradient(to bottom, $colorEnlace, ligthen($colorEnlace, 10%));
}

Incluyendo archivos. Podés tener unas reglas básicas en un archivo maestro e incluirlo en todos tus proyectos, para no repetirte.

@import "normalize";
@import "css3-mixins";

Empezando con Sass

El código CSS es código válido Sass, así que podés empezar en cualquier momento, no tenés que esperar a empezar un proyecto de cero.

  1. Aprender la sintaxis de Sass. En el sitio de Sass podés encontrar la documentación, con ejemplos de código Sass y código compilado CSS. El curso Assembbling Sass de CodeSchool está muy bien explicado y completo.
  2. Compilar Sass. Podés usar una aplicación o la terminal.

Aplicaciones para compilar Sass

Uso de Sass desde la terminal

1) Instalar Sass:

gem install sass

2) Compilar Sass:

sass --watch sass/estilo.scss:css/estilo.css

Flujo de trabajo

  1. Al empezar el proyecto, creá una carpeta “sass” o como quieras llamarla para guardar obviamente los archivos .scss y otra carpeta “css”.
  2. Abrí la aplicación para compilar (o la terminal) y agregá la carpeta de tu proyecto, para que la vigile.
  3. Listo!

Conclusiones

Trabajar con pre-procesadores de CSS tiene ventajas tanto en pequeños como en grandes proyectos. Si bien existen hace años, se pusieron de moda recientemente como técnica para hacer diseños web adaptables3 y si todavía seguís escribiendo vanilla CSS4, te recomiendo que les una ojeada a Less, Sass y Stylus.


  1. Todos los ejemplos de código de este artículo son en Sass, el pre-procesador que uso y recomiendo actualemente. Los beneficios son válidos para los demás pre-procesadores con algunas diferencias en la sintaxis.

  2. En Nested Selectors: The Inception Rule se comentan las mejores prácticas sobre anidación de selectores.

  3. Específicamente para RWD (diseño web adaptable) podés usar la función porcentaje por ej.: .sidebar{width: percentage(400px / 960px);}, usar un mixin para trabajar con media queries, etc.

  4. Como en los sundae, vanilla CSS es CSS común y corriente. Los pre-procesadores son el topping (o en español “la frutilla de la torta”).