Hoy aprenderemos qué es y cómo instalar Sass en nuestro ordenador.

En un tutorial anterior aprendimos qué son los preprocesadores, su importancia y cómo extienden las características de nuestro CSS. En esta ocasión hablaremos de uno de los preprocesadores más populares con los que podemos trabajar: Sass.

Sass o Syntactically Awesome Stylesheets desarrollado inicialmente en el año 2006 por Hampton Catlin, Natalie Weizenbaum, Chris Eppstein, es un lenguaje de hojas de estilo. Su código es open source y está escrito en Ruby, debido a que Sass es una gema de Ruby. Por eso, para poder instalar y utilizar Sass, previamente debemos tener instalado Ruby o alguna aplicación que nos permita trabajar con Sass pese a no tener instalado Ruby. Podemos ingresar a la página oficial de Sass para descubrir qué aplicaciones utilizar. 

En este tutorial iremos por el camino más largo y realizaremos la instalación a través de la terminal. Antes de pasar a la instalación debemos saber un par de cosas más: Ante todo, Sass cuenta con dos tipos de sintaxis con extensiones distintas .scss y .sass.

La primera sintaxis, Sass y CSS, es muy similar a la sintaxis que tenemos en nuestros CSS de siempre, es ideal para personas que están iniciando ya que se sentirán como si estuviesen escribiendo un CSS normal. Una de las de las ventajas de SCSS es que podremos copiar código CSS, pegarlo en SCSS y funcionará sin problemas.

Los archivos de SCSS tendrán la extensión archivo.scss

En la segunda extensión, Indented Syntaxis o sintaxis de indentación, los corchetes son reemplazados por la identación.

Los archivos SASS tendrán la siguiente extensión archivo.sass

En los ejemplos anteriores se muestran algunas de las diferencias entre uno y otro código.

Ahora pasemos a instalar SASS en nuestro ordenador, pero como antes mencionamos, para poder usar SASS es necesario tener instalado Ruby.

La insalación de Ruby dependerá de tu sistema operativo. Puedes encontrar los distintos métodos de instalación ingresando a Instalar Ruby. En este tutorial mencionaremos solo algunas de estas formas de instalación:

Para el caso de windows puedes entrar a RubyInstaller for Windows, descargarlo e instalarlo de una manera muy sencilla. En el caso de Linux o Mac ruby ya viene preinstalado.

En el caso de que tu distribución linux no tenga preinstalada Ruby, deberás ejecutar el siguiente comando desde el terminal. 

sudo apt-get install ruby-full

En mi caso estoy haciendo la instalación desde Elementary OS Loki, una distribución basada en Ubuntu.

Al ejecutar el comando, deberá aparecernos algo similar a lo que se muestra en la imagen.

Al término de la instalación, podremos verificar que tenemos Ruby instalado, ejecutando el siguiente comando.

ruby -v

Nos mostrará la versión instalada en nuestro ordenador, como se ve en la imagen.

Ahora pasemos a instalar SASS, para realizar la instalación por línea de comando, dependiendo de nuestro sistema podemos consultar la guía de instalación de SASS, en windows o mac vamos a abrir el terminal o cmd y ejecutaremos el siguiente comando

gem install sass

En mi caso, desde la terminal de linux, vamos a ejecutar.

sudo gem install sass

Al finalizar la instalación deberemos tener algo parecido a la imagen.

Finalmente, para saber si tenemos SASS instalado vamos a ejecutar el siguiente comando.

sass -v

Se nos mostrará la versión que tenemos instalada en nuestro ordenador.

Y con esto ya podremos utilizar sass en nuestros proyectos. En próximos tutoriales profundizaremos más sobre sass y cómo trabajar con el.

Si tuviste algún problema en durante la instalación de ruby o quieres aprender más de este lenguaje, puedes entrar al curso de Fundamentos de Ruby donde aprenderás desde lo más básico todo lo que debes saber sobre este lenguaje.

Recuerda que en Devcode tenemos una amplia variedad de cursos que complementarán tu aprendizaje. Puedes acceder a ellos tras registrarte en la plataforma. No olvides compartir el tutorial con tus amistades y si tuvieras algún comentario, duda o sugerencia, puedes dejarla siempre en la caja de comentarios.