Hagamos CSS con SASS

La gran cantidad de problemas que podemos abordar en nuestros sitios web hace que los desarrolladores nos tengamos que adaptar a los requerimientos que estos implican, y esto involucra no solamente a los frameworks, arquitecturas, bases de datos… sino también a cómo luce el sitio (los estilos), ya te podrás imaginar, que no es lo mismo escribir estilos para la página de presentación de una panadería local que hacerlo para una gran aplicación bancaria.

Entonces, en un mundo web donde todo es dinámico, mantenible y escalable (o esa es la idea) nuestros estilos también deberían serlo, y para esto, nacen los preprocesadores de CSS, herramientas que nos permiten extender la sintaxis de nuestras hojas de estilo agregándole un montón de superpoderes como el uso de variables, funciones, mixins y anidación. Esta sintaxis, es posteriormente traducida al CSS que todos conocemos y que los navegadores saben interpretar.

Existen varios preprocesadores de CSS, entre ellos Sass, Stylus y Less, que después de conocerlos no queremos volver a saber de 'Vanilla CSS', eso sí, aunque estos nos ofrecen un montón de ventajas, si aún estás iniciando en el desarrollo web, te aconsejo primero dominar los conceptos claves de CSS antes de aprender el camino con atajos.

Por su sintaxis, funciones y comunidad, yo me quedo con SASS (Syntactically Awesome Style Sheets), y en este articulo aprenderemos un poco más sobre el.

¿Como utilizar Sass?

Instalación

Como la sintaxis de Sass no puede ser interpretada por los navegadores, se requiere un traductor que nos convierta el código en CSS, para esto, debemos instalar la gema de Ruby correspondiente para esto.

Guía de Instalación

Si estás construyendo tu aplicación con el CLI de algún framework o biblioteca, algunos de estos ya tienen la opción de agregar Sass al crear el proyecto, entonces te recomiendo consultar la documentación de estos.

Sintaxis

Para escribir tu código con Sass tienes dos opciones:

• SASS: Tus archivos SASS deben tener la extensión .sass. A diferencia de CSS esta sintaxis no hace uso de llaves ni punto y coma, la jerarquía se da haciendo uso de la identacion.

  div
    border-radius: 5px
    background-color: #FF0000

• SCSS: Tus archivos Sass deben tener la extensión .scss. Esta sintaxis surgió a partir de la versión 3 del preprocesador, requiere el uso de llaves y punto y coma.

  div {
    border-radius: 5px;
    background-color: #FF0000;
  }

Cual de las dos elegir? Con la que te sientas mas comodx

Superpoderes

Variables

Como en los lenguajes de programación, te permite almacenar valores para reutilizarlos en la hoja de estilos.

scss:

$font-name: Roboto, sans-serif;
$primary-color: #668cff;

.title {
  font-family: $font-name;
  color: $primary-color;
}

css:

.title {
  font-family: Roboto, sans-serif;
  color: #668cff;
}

Anidación

Permite organizar los estilos de forma jerárquica. Ten precaución de no abusar del uso de este porque puede terminar siendo una mala practica.

scss:

.card {
  border-radius: 5px; padding: 10px;

  &-title {
    font-size: 16px;
  }

  img {
    width: 100%;
  }
}

css:

.card {
  border-radius: 5px;
  padding: 10px;
}

.card-title {
  font-size: 16px;
}

.card img {
  width: 100%;
}

Import

Con @import puedes hacer uso de un archivo dentro de otro scss. La ventaja de importar los archivos con Sass en lugar de hacerlo con el import de CSS es que al hacerlo con CSS, este genera un llamado http para solicitar cada archivo, mientras Sass al ser compilado previamente, genera un solo archivo que contiene todo lo que fue importado, evitando así estas llamadas.

scss:

// _variables.scss
$color-primary: #ff80bf;

// main.scss
@import 'variables';

.title {
  color: $color-primary;
  font-size: 18px;
}

css:

.title {
  color: #ff80bf;
  font-size: 18px;
}

Archivos parciales

Puedes crear archivos con pequeños trozos de código con el objetivo de modularizar tu código, para esto, solo necesitas crear un archivo que en el nombre contenga al inicio el símbolo _, como por ejemplo _estilos.scss y con esto, Sass sabrá que es un archivo parcial y lo podrás agregar a otro archivo haciendo uso de @import.

Mixins

Los mixins nos permiten reutilizar un trozo de código, agrupando una serie de lineas que pueden ser insertadas posteriormente en otro lugar del CSS, con valores que pueden ser dinámicos haciendo uso de parámetros. Los mixins son de gran utilidad, por ejemplo, cuando tenemos una propiedad a la que se le debe agregar el prefijo correspondiente para cada navegador (-webkit, -moz, -ms…).

scss:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

css:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}