Preprocesadores de css. Descubriendo Sass (Parte 1)

Un preprocesador de css es una gran herramienta para el desarrollo web front-end. Nos ayuda a escribir el código y nos ahorra muchas líneas. Su filosofía es poder superar los límites de css y a la vez hacerlo más sencillo y entendible. Pero, ¿significa esto que debemos usar un preprocesador obligatoriamente? ¿Es imprescindible usarlo si queremos dedicarnos al desarrollo web profesionalmente? Lo cierto es que no. Debemos entender que un preprocesador no es más que eso. Algo que como resultado nos dará css normal y corriente. Si sabemos escribir css y lo hacemos bien, el resultado final será siempre el mismo.

Por lo tanto, usar un preprocesador como puede ser Less o Sass no es imprescindible para el desarrollador font-end. No obstante, si existe algo que facilita nuestro trabajo ¿por qué no usarlo? Todo lo que pueda ayudarnos a maquetar y escribir mejor es bienvenido. La intención de este artículo es hacer una aproximación a este tipo de lenguaje. Este será el primero de una serie de artículos donde desgranaremos el lenguaje Sass y estudiaremos las ventajas que nos da. En todo caso, una vez conozcamos cómo es trabajar con Sass, decidiremos si vale la pena usarlo o no, pero no debemos descartar esta herramientas por miedo o por desconocimiento.

Sass, guía de instalación

Lo primero que haremos será instalar Sass en nuestro ordenador. Lo que hace sass es procesar un archivo escrito en este lenguaje (con la extensión .scss) y convertirlo a css entendible por el navegador. Para instalarlo podemos ir a su página oficial: https://sass-lang.com/install. Aquí nos indican dos maneras de instalarlo. Lo mejor es instalarlo a través de ruby. En Windows tendremos que instalarlo a través del ruby installer, pero asegúrate de bajar la versión 2.4.x, de lo contrario el comando para instalar Sass no funcionará. Si eres usuario de Mac estás de suerte, ruby ya viene preinstalado.

Una vez instalado ruby, sólo tendremos que ir a la consola de comandos. (Desde Windows, ejecutando el archivo ‘cmd’. Desde Mac abriendo ‘Terminal.app’). Deberemos escribir:

gem instal sass

Con eso ya estaremos listos para empezar.

Primeros pasos

Lo primero que vamos a haces es crear nuestro primeros estilos. Con ello empezaremos a notar las diferencias entre Sass y css.

Lo primero que vamos a hacer es crear nuestro archivo Sass. Abrimos nuestro editor de texto y guardamos un archivo con la extensión «.scss». (Si queremos que Sulime Text reconozca el formato y nos coloree el código, deberemos instalar el paquete de Sass para Sublime).

Variables

Podemos empezar a crear unas cuantas variables. Sí, habéis oído bien: variables. Podemos decretar algunos valores fijos que podremos llamar en cualquier selector y en cualquier propiedad css que los acepte. Por ejemplo:

Puedo crear la variable «$primary-color: coral;». Lo único que tengo que hacer es decretar una palabra clave a mi elección con el símbolo del dólar ($) delante. Luego simplemente bastará con llamarla:

.selector { 
   color: $primary-color; 
   background-color: $primary-color; 
} 

Esto ya nos da una ventaja enorme. Si quisieramos cambiar el color principal de mi web, lo único que tendríamos que hacer sería cambiar el valor de la variable «$primary-color» (recordad que el nombre de la variable lo he escogido yo, pero podría llamarse de cualquier otra forma). Automáticamente ese valor cambiaría en todas las propiedades de css que usen la variable.

Las variables son bastante útiles sí, pero es algo que ya podíamos hacer con css nativo. Sin embargo, hacerlo con Sass es mucho mejor debido a que nos ahorramos problemas de compatibilidad con los navegadores (Las variables nativas de css no están soportadas en IE).

Nesting

El nesting es otra de las increíbles ventajas que nos trae Sass. En css para afectar a una etiqueta o identificador en concreto podíamos escribir toda la ruta de sus contenedores hasta llegar al elemento. Siendo específicos lográbamos asegurarnos que sólo afectábamos al elemento deseado. Para hacer nesting en css debíamos hacer lo siguiente:

 header nav ul li a {reglas css;} 

Teníamos que repetir la ruta una y otra vez hasta llegar al elemento que queríamos afectar, creando en ocasiones selectores larguísimos.

Con Sass podemos hacer algo así:

/*VARIABLES*/
$primary-font: 'Raleway', sans-serif;
$titles-font: 'Abril Fatface', cursive;
$primary-color: coral;

/*REGLAS*/
* {
	margin: 0;
}

body {
	font: 15px $primary-font;

	a {
		text-decoration: none;
	}
}

header {
	background-color: $primary-color;
	color: #fff;
	overflow: auto;
	padding: 1.4rem;

	* {
		vertical-align: middle;
	}

	h1 {
		font: $titles-font;
		display: inline-block;
	}

	nav {
		display: inline-block;
		float: right;
		margin-top: 7px;

		ul {
			padding: 0;

			li {
				display: inline-blocK;
			}

			a {
				transition: all 0.5s;
				padding: 5px 1rem;
				&:hover {
					background-color: rgba(255,255,255,0.8)
				}
			}
		}
	}
}

Si os fijáis, podemos escribir selectores dentro de otros selectores. De tal manera que podremos afectar a los links dentro de un nav de la siguiente manera:

.contenedeor {
   nav {
      a {
         reglas css de la a;
      }
   }
}

El resultado en css dará el siguiente selector: .contenedor nav a.

Compilar el archivo a css

Una vez hayamos acabado nuestros primeros estilos, querremos probar cuál es el resultado final en el navegador. Pero si enlazamos nuestro html a nuestro archivo scss no funciona. Un navegador no puede leer código scss, necesitamos un archivo en css nativo.

Para que Sass pueda crear el archivo css deberemos escribir lo siguiente en la consola de comandos (sass –watch *ruta de la carpeta que contiene nuestro scss*:*ruta de la carpeta que tendrá el css final*), en mi caso:

sass --watch scss:css

Nota: Para que funcione el comando sass y localice nuestro nuestro archivo, tendremos que haber accedido a la carpeta raíz de nuestra web mediante el comando cd.

¡Hasta aquí por hoy! Ya podéis practicar con Sass. Podéis tomar de muestra el código de este artículo y aplicarlo a vuestro html o podéis animaros y crear vuestras propias normas. Veréis en seguida que es muy sencillo. De hecho si os acostumbráis a escribir con Sass veréis que es incluso más fácil que escribir css.