¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Introducción a Sass y SCSS

Vamos a meternos en el mundillo de los pre-procesadores CSS y, en este caso, sobre Sass, que es el acrónimo de Syntactically Awesome Style Sheets que en castellano viene a ser Hojas de estilos sintácticamente increíbles y SCSS (Sassy CSS). Veamos algunas definiciones, cómo funciona y cómo usarlo en nuestro día a día.

Si a día de hoy sigues escribiendo CSS a pelo, tengo buenas noticias para ti. ¡Sigue leyendo!

Pre-procesadores CSS

Los pre-procesadores son herramientas que nos permiten escribir CSS con una sintaxis particular y lo convierte en CSS que es, al fin y al cabo lo que las páginas necesitan para verse bonicas.

¿Qué beneficios tienen entonces?

Éstos nos permiten tener una estructura que escala mucho mejor en el tiempo y tamaño de nuestro proyecto, así como algunas odiosas repeticiones que en CSS tenemos que tener.

Hay varios pre-procesadores disponibles para nosotros, siendo los más comunes Sass (con SCSS) y LESS. En este artículo, como ya lo habrás adivinado, hablaremos de Sass que es el que acostumbro a usar.

¿Y por qué no Less?

LESS fue bastante popular, especialmente dado que Bootstrapp usa Less. No obstante, la comunidad está cada vez más volcada con Sass y los creadores de Bootstrapp ya han anunciado que pasarán a Sass pronto.

Sass es mejor en diferentes cosas, especialmente en la sintaxis al construir sentencias de control (if, bucles for, etc). No obstante si usas LESS, no voy a odiarte ni nada por el estilo. ¡Ya te haces un gran favor usando un pre-procesador!

¿Sass? ¿SCSS? ¿Cuál es la diferencia?

Antes de que profundicemos mucho más, vamos a aclarar algo que mucha gente acaba preguntándose. Sass y SCSS a menudo se meten en el mismo saco, la gente suele usar SCSS diciendo que es SASS.

Sass es el pre-procesador y la sintaxis al completo. Tiene su propia sintaxis (que es indentada) y se compila en CSS.

SCSS cae dentro del saco de Sass, es la sintaxis de CSS que ya conoces pero tiene todas las ventajas de Sass. Un CSS válido es un SCSS válido por lo que es mucho más sencillo y amigable de escribir.

Personalmente escribo con SCSS como creo que la gran mayoría pero la diferencia es notable:

// Sass
.articulo 
  font-size: 20px;
  color: #000;

  .cabecera
    font-weight: bold;
    text-transform: uppercase
// SCSS
.articulo {
  font-size: 20px;
  color: #000;

  .cabecera {
    font-weight: bold;
    text-transform: uppercase
  }
}

Ahora que ya tenemos claro los conceptos claves, veamos algunas de las características que convierten a Sass en algo tan potente.

Variables

El usar variables me ha salvado muchas veces de tener que abusar de *Buscar y reemplazar". Una vez que se haya declarado una variable podemos usarla por todo el documento. Suelen usarse para definir colores, tamaños, etc.

$color-principal: #293545;
$color-secundario: #619edd;

.footer,
.cabecera {
  background-color: $color-principal;
}

a {  
  color: $color-secundario;
}

.mi-boton {
  background-color: $color-principal;
  color: #fff;
}

Que al compilarlo a CSS, se quedaría así:

.footer,
.cabecera {
  background-color: #293545;
}

a {  
  color: #619edd;
}

.mi-boton {
  background-color: #293545;
  color: #fff;
}

Ahora imagina que el diseñador cambia de idea y quiere cambiar el color, ¡solo tienes que cambiarlo en un sitio!

Además, las variables nos permiten hacer matemáticas con ellas:

$cabecera: 100px;

.cabecera {
  height: $cabecera;
  position: fixed;
  top: 0;
}

.contenido {
  padding-top: $cabecera + 40px;  
}

Y en CSS:

.cabecera {
  height: 100px;
  position: fixed;
  top: 0;
}

.contenido {
  padding-top: 140px;  
}

¡Perfecto!

Anidar

El anidar es una de esas cosas sin las que ya no puedo vivir. No obstante es tan útil como peligroso porque es fácil comenzar a anidar infinitamente. Como regla general, solo uso como máximo dos niveles.

Veamos un ejemplo básico:

.navegacion {    
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    display: inline-block;
    vertical-align: middle;
  }

  a {
    display: block;
    padding: 5px 20px;
  }
}

Que, convertido a CSS:

.navegacion ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navegacion li {
  display: inline-block;
  vertical-align: middle;
}

.navegacion a {
  display: block;
  padding: 5px 20px;
}

Como ves, Sass nos ha evitado el tener que escribir .navegacion tantas veces.

El selector ancestral

Ya. Me ha quedado demasiado rimbombante. El caso es que no tiene nombre oficial ni nada así que me lo he inventado. Básicamente es un selector que sirve para acceder al ancestro. Se entiende mejor con un ejemplo.

a {  
  color: blue;

  &:hover,
  &:focus {
    color: green;
  }
}

Con el ampersand es como si estuviéramos escribiendo a otra vez, solo que tendríamos que hacerlo fuera del bloque a. El CSS queda así:

a {  
  color: blue;
}
a:hover, a:focus {  
  color: green;
}

Sencillo, ¿no? pues aun hay más:

a {  
  color: blue;

  .error & {
    color: black;
  }
}

El ampersand podemos colocarlo tanto delante como detrás. De esta manera conseguimos que todos los enlaces colocados dentro de un elemento con la clase error sea de color negro:

a {  
  color: blue;
}
.error a {
  color: black;
}

Extender

Podemos extender estilos de otras declaraciones, lo cual es algo útil si queremos usar una base y ofrecer variantes. Veamos un ejemplo:

.mi-boton {
   border-radius: 4px;
   padding: 2px 5px;
   font-size: 16px;
 }

.mi-boton-grande {
  @extend .mi-boton;
  font-size: 18px;
}

Aquí tenemos un sencillo botón. El botón grande simplemente aumenta la fuente para hacerlo... más grande. Así es como queda al compilarse:

.mi-boton, .mi-boton-grande {
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 16px;
}

.mi-boton-grande {
  font-size: 18px;
}

Importar

Esta quizá sea mi característica favorita ya que nos permite partir un enorme fichero en varios más pequeños que son más sencillos de mantener. Si nombramos a los ficheros con un guión bajo delante, Sass sabrá que no tiene que compilar esos fichero. Supongamos que tenemos unos ficheros así: _reset.scss, _formularios.scss, _texto.scss y estilos.scss, algo así deberíamos escribir en el fichero principal estilos.scss:

@import 'reset';
@import 'formularios';
@import 'texto';

Y los archivos serán incluidos en orden una vez sean procesados.

Mixins

Los mixins son otras de las grandes funciones de Sass ya que nos permiten escribir nuestras propias funciones. Veamos algunos sencillos ejemplos:

@mixin cuadrado($tamano) {
  width: $tamano;
  height: $tamano;
}

@mixin circulo($tamano) {
  @include cuadrado($tamano);
  border-radius: 100%;
}

.avatar {
  @include circulo(40px); 
}

Que en CSS es:

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 100%;
}

Como ves hemos creado una sencilla función para crear un círculo a raíz de un tamaño base, ahorrándonos escribir gran parte del código.

Prueba Sass

Sass es una gema de Ruby. Ruby viene pre-instalado en los Macs aunque su instalación en Windows/Linux no es compleja.

No obstante en un gran esfuerzo por parte de la comunidad, se creó Libsass, que funciona sobre C++, haciéndolo compatible con Node.js y funcionando más rápido que la gema de Ruby. La única pega es que el soporte no es completo, es decir, faltan algunas características de la gema de Ruby en la librería de C++, pero para la mayoría de proyectos debería funcionar bien ya que es 98.53% compatible.

Teniendo Ruby instalado simplemente escribimos en la línea de comandos:

gem install sass  

Una vez instalado, para ejecutarlo desde la línea de comandos:

sass entrada.scss salida.css  

También puedes decirle a Sass que vigile el archivo y lo actualice cada vez que el archivo cambie:

sass --watch entrada.scss:salida.css  

Grunt y Sass

Si ya estás usando Grunt (cosa que deberías) y quieres integrarlo con Sass, la librería a usar es grunt-contrib-sass.

La configuración sería algo así:

module.exports = function(grunt) {  
    grunt.initConfig({      
        sass: {
            dist: {
                files: {
                    'css/estilos.css' : 'scss/estilos.scss'
                }
            }
        },
        watch: {
            css: {
                files: 'scss/*.scss',
                tasks: ['sass']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

Con watch (otra tarea de Grunt) hemos logrado que cuando cambie cualquier archivo SCSS, lo compilemos todo a CSS de nuevo. ¡Genial!

Resumiendo

Lo que hemos visto hasta ahora de Sass no es más que un pequeño conjunto de funcionalidades que lo hacen increíble. Sass tiene multitud de funciones internas, mapas, etc que ayudan aun más pero esto debería haberte abierto los ojos y servirte como punto de partida.

¡Ve paso a paso y comienza a probar! Seguiré escribiendo sobre algunas cosas que he descubierto con Sass que pueden ayudarte aun más.

¡Te agradeceré si dejas cualquier comentario con peticiones, dudas y/o feedback en general!

Otros artículos sobre Sass y SCSS

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!