Sass (Syntactically Awesome Style Sheets) o CSS con súper poderes, es una excelente herramienta escrita en Ruby que nos permite crear hojas de estilos estructuradas, limpias y fáciles de mantener.
Instalar Sass y comenzar a escribir estilos sin consideraciones no convertirá por arte de magia nuestras hojas de estilo en obras de arte. Es necesario tener un buen conocimiento de la herramienta y seguir una serie de buenas prácticas para conseguir nuestro cometido. Recuerden: Sass doesn’t create bad code. Bad coders do. (Sass no crea mal código, malos programadores lo hacen).
Comenzaré una serie de tutoriales, donde espero explicar ampliamente el funcionamiento de Sass, cuales son sus características y buenas prácticas. Las publicaciones se harán cada semana, dando tiempo de preparar material nuevo y que ustedes vayan probando poco a poco todo lo que vaya explicando. Siéntanse libres de comentar sus dudas en la sección de comentarios, muy amablemente trataré de responderles.
Si eres nuevo con Sass, llegaste al lugar indicado y sí ya tienes experiencia con la herramienta no sería mala idea seguir la serie para refrescar conocimientos que puede que hayas olvidado y aprender buenas prácticas.
Lo primero es lo primero, vamos a instalar y configurar Sass desde cero.
Sass es multiplataforma y su proceso de instalación es bastante sencillo. Tenemos dos caminos a escoger: mediante aplicaciones que integran la herramienta o por medio de la línea de comandos.
Si prefieren irse por la primera opción, en la página oficial encontrarán una lista de aplicaciones recomendadas. Por comentar alguna, los invitaré a probar Scout, es open source y en pocos minutos conseguirás mediante la instalación de la aplicación un entorno de trabajo listo para comenzar a probar la herramienta.
Hablaremos con mayor profundidad sobre la línea de comandos. Si nunca la usaste, no te preocupes, el proceso de instalación de Sass es muy sencillo y trataré de explicarlo detalladamente para evitar confusiones.
Requerimientos previos:
Es necesario tener instalado Ruby en nuestro sistema. Antes de comenzar con la instalación; voy a explicar el motivo: Sass es un gem (joya) de Ruby. RubyGems es el gestor de paquetes de Ruby que provee un formato estándar para distribuir paquetes/librerías (Gems). Fue diseñado para manejar fácilmente la construcción, instalación y distribución de librerías.
Ruby será nuestro aliado
Instalación de Ruby en Windows:
La manera más sencilla y rápida que conozco es RubyInstaller for Windows. Básicamente, un paquete ejecutable, el proceso de instalación es el habitual: una serie de pasos que te presentan cierta información y opciones, vas leyendo y siguiendo las indicaciones.
Instalación de Ruby en Mac y Linux:
En Mac y Linux, Ruby viene por defecto pre-instalado en el sistema. La versión no es la más reciente, pero si tu intención es sólo usar Ruby para trabajar con Sass, te servirá.
El requerimiento de Sass es que la versión de ruby sea >= 1.8.7, por lo general la versión que viene pre-instalada es la 1.9.3 o superior.
Por último, si tu distribución en Linux no trae Ruby pre-instalado, contamos con variedad de opciones para instalarlo, a continuación les comentaré las dos que he tenido la oportunidad de probar:
Usar el Sistema de Gestor de Paquetes. Si tienes instalado Debian o alguna distribución basada en ella, puedes hacer uso de apt (Advanced Packaging Tool) de la siguiente manera:
$ sudo apt-get install ruby
Sí usas una Distribución que no utilice apt como gestor de paquetes, puedes revisar la página oficial de Ruby donde explican extensamente los diferentes métodos de instalación.
Por último, les presento a RVM (Ruby Version Manager). Una herramienta para la línea de comandos que te permitirá fácilmente instalar, manejar y trabajar con múltiples entornos de Ruby.
El proceso de instalación es un poco más complejo pero nada de otro mundo, así que tranquilos y anímense a probarlo.
RVM, no es exclusivo de Linux, puede también ser instalado en Mac o Windows. De hecho, es lo que uso a diario en Mac. Recomiendo esta opción, la curva de aprendizaje es un poco más fuerte pero vale la pena. Te permitirá contar con diferentes versiones de Ruby y Sass sin crear conflictos entre ellas, permitiendo probar las nuevas características de Sass en próximas versiones, sin dañar o desinstalar la versión que usas habitualmente.
Me gustaría comentar más extensamente mi experiencia con esta herramienta pero eso ya es tema para otro artículo, me comprometo a hacer luego un resumen explicando al detalle la instalación y configuración.
Instalar Sass:
Llegamos a la instalación de Sass, el proceso previo ha sido un poco largo, he querido explicar con detenimiento la variedad de opciones que tenemos para evitar confusiones. Igualmente, reitero lo dicho en un párrafo anterior, si tienen dudas, siéntanse libres de publicarlas en la sección de comentarios, y les daremos respuesta.
La instalación es muy sencilla:
- Abrimos la línea de comandos (en Windows ejectuan el programa «cmd»).
- Usamos RubyGems para la instalación, recuerden Ruby usa Gems para manejar la variedad de paquetes/librerías. Escribimos lo siguiente:
$ gem install sass
El comando instalará Sass y todas las dependencias requeridas. Si la línea de comandos imprime un mensaje de error, es probable que necesites usar el comando sudo para instalar Sass satisfactoriamente.
$ sudo gem install sass
Para comprobar que la instalación fue exitosa, copiamos y pegamos el siguiente comando:
$ sass -v
Nos imprimirá la versión de Sass: Sass 3.4.7 (Selective Steve).
¡Felicitaciones! completaste el proceso de instalación satisfactoriamente.
En mi próximo artículo, explicaré cómo empezar a trabajar con Sass y cuales son sus características y beneficios.
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección siguiente Aprende Sass: Características principales