Beneficios de los pre-procesadores de CSS

¿Para qué usar un pre-procesador de CSS?¹ 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.

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

• Aplicaciones para Mac: CodeKit (LESS/Sass/Stylus), LiveReload (LESS/Sass/Stylus), Hammer (Sass), Scout (Sass).
• Aplicaciones para Windows: LiveReload (LESS/Sass/Stylus), Scout (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 adaptables² y si todavía seguís escribiendo vanilla CSS³, te recomiendo que les una ojeada a:

• Less
• Sass
• Stylus