+ TecnoBato

Introducción

Por mucho tiempo le temí al mentado preprocesador de CSS. “La mejor forma de hacer CSS”, “la única manera de programar”, “no había vivido, hasta que conocí SASS”, fueron algunas cosas que leí.

Bueno, la verdad no, pero sí escuché que estaba muy chido todo este cotorreo. La razón por la que yo, y me temo que mucha gente que viene más de un contexto de diseño, que de programación, es que no le entendíamos nada.

Y la razón por la que no le entendíamos nada, es porque no existía un tutorial sencillo, para (tec)novatos, fácil de entender. Se asumían muchas cosas, por ejemplo, los tutoriales decían:

Instala la gema de sass y compass

Cuando uno inicia en este mundo, no tiene idea de lo que eso significa. Incluso ahora, algunos años después, sigo sin entenderlo. Pero al menos ya sé qué tengo que hacer.

TL;DR (versión corta)

1. Instalar Ruby.
2. Instalar Bundler. Ejecutar en línea de comando (tal cual):
   gem install bundler
3. Crear y configurar gemfile en carpeta de desarrollo.
4. En la consola, navegar a la carpeta del proyecto e instalar dependencias. Ejecutar en línea de comando:
   bundle install
5. Crear y configurar archivo config.rb.
6. Crear estructura SASS (dependerá de su config.rb).
7. En la misma carpeta del proyecto: escuchar cambios. Ejecutar:
   bundle exec compass watch
8. ¡Listón!

Tutorial

En la sección “versión corta”, hice un resumen de lo que hay que hacer. He aquí la explicación a detalle:

Instalar Ruby

Ruby es un ambiente requerido para instalar “gemas”, como se les llama a los proyectos específicos, por ejemplo SASS, Compass, Breakpoint, y un largo etc.

La manera más sencilla de instalarlo en Windows, es mediante el ejecutable que provee Ruby Installer. Es como un instalador cualquiera: ejecutas, siguiente, siguiente, finalizar.

Si tienen Mac OS X, ya está preinstalado. Si están usando Linux, lo más seguro es que ya sepan cómo hacerlo. Sino, aquí hay instrucciones.

Si están usando alguna aplicación “third party” de línea de comandos (como Console 2), vean el apartado “Configurar Console 2” más abajo.

Nota: si quieren usar exactamente la versión que yo estoy usando, es la 2.2.5 (x64). De nuevo, en mi caso, estoy usando Windows 10. Al término de la instalación de este paquete, abrí la línea de comando que trae Windows por default (cmd, símbolo de sistema, consola, etc.), el nombre cambió a:

Start Command Prompt with Ruby

Lo que indica que Ruby ya se integró y ya puedo instalar gemas desde aquí. Existen otras alternativas de consola a la que trae pre instalada Windows, si quieren una sugerencia, intenten Console 2, pero insisto: no es indispensable, la que trae Windows jala.

Nota: es posible que Windows pida autorización para desbloquear el acceso a la red cuando se comiencen a usar los siguientes comandos, particularmente al instalar gemas.

Instalar Bundler

Bundler es una gema de Ruby. Su función es facilitar el caos de versiones locas que podemos tener para un proyecto y asegurarnos de que son compatibles entre sí. Porque cada gema, como cualquier software, tiene diferentes versiones (.1, 1, 1.1, 1.2, 2, etc.), que la pueda volver incompatible con las otras, o incluso con la misma versión de Ruby.

Normalmente esto no es problema y lo único que tenemos que hacer es definir la versión de cada gema para que Bundler se encargue de instalar el ambiente.

En pocas palabras, facilita la vida. Instalan Bundler, configuran su proyecto en un documento que veremos más adelante, y ¡pum! Bundler se encarga.

Nota: no necesitan descargar nada de este sitio, sólo lo puse de referencia.

Entonces, para poder instalar Bundler, escriban lo siguiente en su línea de comandos favorita:

gem install bundler

No necesitan navegar a ninguna carpeta, así tal cual en la consola escriban la línea anterior. Al instalarse, aparecen una serie de mensajes, y lo que debería leerse después de una instalación satisfactoria es:

1 gem installed

Crear “gemfile”

Instalado el Bundler, necesitamos especificar un archivo de configuración, llamado gemfile, y se usa así tal cual, sin extensión.

Dentro de esta configuración, estableceremos los requerimentos del proyecto, que pueden variar de uno a otro. Por ejemplo, copiaré tal cual mi gemfile como yo lo tengo, con todo y comentarios:

# The source for our Gems.
source "http://rubygems.org"
ruby "2.2.5"

# Our dependencies.
gem 'sass', '3.3.0.alpha.149'
gem 'compass', '0.12.2'
gem 'breakpoint'

# Remember to bundle install and run your Compass compiling 
# through bundle exec (bundle exec compass watch)

En el código anterior, los comentarios empiezan con un hash (#). Estamos especificando qué versión de Ruby tenemos, que es la que instalaron en el primer paso. Si están usando otra versión de Ruby, tiene que coincidir aquí. Las otras dependencias, son ahora sí SASS, Compass, y Breakpoint.

SASS, ya deberían saber qué es. Los otros dos, son complementos para SASS; Compass trae varios mixins pre-definidos listos para usar. En mi experiencia: es raro ver SASS sin Compass. Finalmente Breakpoint, es usado principalmente para RWD, para establecer reglas de CSS para diferentes anchos de pantalla/viewport/navegador. Esto, las reglas para diferentes tamaños, se conoce como breakpoints y va muy ligado a la mentalidad del diseño web responsivo.

Pero estos complementos, son tema para otro artículo, regresemos al tutorial.

Nota: las dependencias que estoy usando aquí, SASS 3.3.x, Compass 0.12.2, y Breakpoint (sin especificar versión), son los que me funcionan. No significa que no haya otras combinaciones que funcionen, sólo que me ha dado flojera experimentar.

Nota 2: el gemfile es un archivo sin extensión, no tiene .exe, .doc, .docx, .html, ningún tipo de extensión de archivo. Si no saben cómo hacerlo o simplemente les da flojera, pueden descargar el mío. Sólo tengan en mente que su entorno, necesidades y kilometraje puede variar (principalmente la versión de Ruby que tengan instalada).

Instalar las dependencias

Ya configuramos el gemfile, que es lo que Bundler leerá y usará para decidir el entorno a instalar en su carpeta de desarrollo. Sí, cada vez que crean un proyecto y configuran su gemfile, se instala un pequeño entorno de SASS, Compass y todas las dependencias que requieran.

Suena a que es demasiado desmadre de archivos, sobre todo si siempre van a usar las mismas exactas versiones. Sin embargo, para fines prácticos, cuando lleguen a tener muchos proyectos y vayan evolucionando y experimentando con diferentes versiones, es posible que sea útil tener este gemfile con su propio entorno de referencia. También podría pasar que cambiaron de equipo, actualizaron el sistema operativo, o simplemente le dieron una formateada. Después de tanto tiempo, con ganas de desempolvar el software, es posible que ya haya muchas nuevas versiones de Ruby o SASS, que les puedan ser de utilidad.

Bueno no sé, sólo quería exponer un caso de uso… no importa, el caso es que así funciona Bundler; yo no lo inventé.

Como sea, el siguiente paso es de nuevo en su línea de comandos favorita, que puede ser el “símbolo de sistema” de Windows (Menú Inicio > Ejecutar > “CMD” > enter). Si no saben cómo navegar en la línea de comando, les recomiendo leer un tutorial.

Para facilitarles la vida, les explicaré rápidamente lo más imporante: el comando “cd folder-1” accede a la carpeta llamada “folder-1”. Si dentro de ésta existe otra llamada “folder-2”, el comando para entrar sería: “cd folder-2”. Si quieren salirse del directorio actual (por ejemplo, de folder-2 subir a folder-1), usen “cd ..” (cd punto punto).

Esto realmente no tiene mayor ciencia y es bastante recomendable aprender a navegar en consola. Si bien no es necesario saberse todos los comandos de memoria, al menos cómo desplazarse entre carpetas sí es básico e insisto: es muy fácil, “cd carpeta”, “cd ..” es todo lo que tienen que memorizar.

Como sea, si ya navegaron en la línea de comandos hasta la carpeta de su proyecto donde tienen su gemfile, ejecuten la siguiente instrucción:

bundle install

Esto instalará las dependencias. Ojo: es “bundle” sin la R de Bundler.

En la imagen anterior, pueden apreciar cómo me marcó el error:

Your Ruby version is 2.2.5, but your Gemfile specified 2.1.6

Lo que significa que mi gemfile estaba mal configurado. Usaba este gemfile en proyectos anteriores, pero como formateé la computadora (como la historia que conté anteriormente), decidí instalar una versión más actual de Ruby. Lo único que hice fue cambiar en mi gemfile la versión de Ruby a la que tiene mi sistema actualmente.

Crear “config.rb”

Ya tienen instalado SASS y las dependencias que necesitan. En el código de ejemplo que les mostré, estaban como dependencias Compass y Breakpoint, pero podrían tener más.

Ahora es tiempo de configurar su proyecto. Esto se puede hacer de diferentes maneras, en este sitio les explican cómo hacerlo fácilmente con la línea de comando. Ahí pueden especificar si quieren que sea un proyecto nuevo, existente, cómo quieren que se llame el proyecto, si van a usar SASS con “sabor CSS” o “indentado”, etc.

La manera en que yo prefiero configurar mis proyectos es simplemente copiando mi archivo de configuración config.rb, que ya tengo de proyectos anteriores. No suelo hacerle cambios, así que sólo lo voy copiando de proyecto a proyecto cuando lo necesito.

Aquí el contenido completo de mi archivo config.rb:

# Require any additional compass plugins here.
require 'breakpoint'

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "/"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "/"
output_style = :compact
line_comments = false

Básicamente lo que le estoy diciendo es (me iré línea por línea, ignorando los comentarios):

1. Se usará la gema Breakpoint en este proyecto.
2. El http_path la verdad no sé qúe es :( . Tiene que ver con la dirección de producción de su sitio (live site).
3. El directorio donde se compilarán los css respectivos será la raiz del proyecto.
4. Mi carpeta para archivos SASS dentro de este proyecto se llamará “sass”.
5. El directorio para imágenes será “img”.
6. El folder para javascript: la raiz.
7. El tipo de código CSS que se escriba será “compacto”, lo que remueve espacios en blanco y cambios de línea en el CSS compilado. Otros tipos de output son: nested, compacted y compressed. Compressed es el más compacto de todos, quita totalmente cualquier espacio no indispensable y deja una bola de código ilegible pero un archivo de poco peso.
8. La línea sobre los comentarios, no estoy seguro pero me parece que cuando está en falso, todos los comentarios de tipo /* soy un comentario multi-línea */ se verán en el CSS compilado, pero no así los comentarios de tipo // soy un comentario uni-línea.

Crear estructura SASS

Como bien han visto en mi caso y como creo que será el resto del mundo, mi carpeta para archivos SASS se llama “sass”. Pero bueno, ése soy yo (y posiblemente cientos de miles de millones de trillones de otras personas), pero nada les impide a ustedes llamar a esta carpeta “proyecto-secreto-x”. Sólo recuerden actualizar el config.rb.

Entonces, a crear esta carpeta en su proyecto. Pueden hacerlo en la línea de comando o en el explorador de Windows/Finder. Botón secundario > Crear carpeta. Dentro de ésta, hay que crear un archivo, como ustedes quieran llamarlo, con la extensión .scss. Una pista, pueden usar “style.scss”.

Nota: el siguiente paso no funcionará y marcará error si no existe al menos un archivo .scss dentro de la carpeta que ustedes decidieron usar para los archivos SASS.

Nota 2: en un artículo posterior, puedo mostrarles mi propia estructura de archivos y carpetas, sobre todo la manera en que descentralizo los diferentes parciales SASS. ¡Recuérdenmelo!

“Escuchar” cambios

Ahora bien, ya tenemos configurado nuestro proyecto, un .scss en la carpeta asignada para SASS, podemos proceder.

Se supone que seguimos en nuestra línea de comandos. Acabamos de hacer el “bundle install”, así que deberíamos estar situados en la carpeta del proyecto. En caso contrario, hay que navegar por comandos hasta ella.

Todos ustedes saben que, aunque SASS utilice exactamente el mismo formato y sintaxis de CSS (más extras), un navegador no entiende un archivo SASS. Ustedes no pueden escribir SASS en el head de un documento HTML o vincular a éste una hoja de estilos externa con extensión .scss. Al menos no si esperan que se interprete.

Entonces, ¿cómo? Tenemos que compilar el código, para que se escriba un archivo CSS. Para hacer esto necesitamos poner a la consola a “escuchar” cambios en la carpeta de nuestro proyecto. Ejecutamos lo siguiente (de nuevo: verifiquen que su carpeta actual en la consola sea la del proyecto):

bundle exec compass watch

En su consola aparecerá algo así como:

>> Compass is polling for changes. Press Ctrl-C to Stop.

Esto hará que cada que guardemos un cambio en nuestro archivo SCSS, se compilará y creará/sobrescribirá un CSS. Así es, cada vez que presionemos “control+s” para guardar el archivo, se lee, compila, y sobrescribe el CSS.

Nota: si su archivo SCSS tiene algún error de sintaxis, no se compilará el CSS. Será como si su sitio, si ya están trabajando en un proyecto desarrollado, no tuviera hoja de estilos. En lugar de ello, les dirá el error donde se supone que se encontró, para corregirlo.

Nota 2: un error común puede ser olvidar ejecutar este paso. Si no ponen a la línea de comandos a escuchar cambios cada vez que van a trabajar en su proyecto, todo lo que modifiquen en SASS no se interpretará, sus cambios no se compilarán, y su CSS seguirá igual. Recuerden siempre ejecutar “bundle exec compass watch”, en la carpeta de su proyecto. Cada vez que cierren su consola que estaba escuchando cambios o apaguen su ordenador, tienen que volver a escuchar cambios.

Listón

Ahora tienen su primer proyecto SASS configurado. Pueden incluso copiar todo su CSS de un proyecto actual, meterlo a su .scss, y compilar un CSS idéntico. SASS entiende exacta y totalmente la sintaxis, reglas y selectores CSS, al 100%.

Entonces ya pueden ir lentamente experimentando con la funcionalidad avanzada que trae SASS “a la mesa” conforme la conozcan, siempre de la mano del CSS que ya conocen.

Importante

Algunas notas que me parece relevante recalcar:

• Instalar SASS no es tan difícil, de hecho tenía tiempo sin visitar el sitio, ya parece haber métodos más sencillos / gráficos.
• Empezar a usar SASS es aún más fácil, ya instalado el entorno, pueden escribir CSS tal cual en su archivo .scss. ¡SASS es CSS!
• No olviden poner a escuchar cambios en su consola con el comando “bundle exec compass watch”.

Lecturas adicionales

Algunas (o todas) están en inglés pero, why wouldn’t thou already know that bewitched speak?

• Compass vs Bourbon: Bourbon es similar a Compass, cuestión de gustos.
• Tutorial para principiantes en “The SASS way”.
• Usando Bundler para SASS y Compass.
• Getting started con SASS.
• “Agony free front-end development“: creo que fue éste el mejor o más sencillo tutorial que encontré para instalar SASS y Compass (en su momento hace un par de años, porque creo que ya hay documentación mejor explicada).

Viejo error

Recuerdo que cuando comencé a escribir este tutorial, hace como dos años (ya sé), tuve un error. En mi carpeta del proyecto, existía este directorio:

\proyecto\vendor\bundle\ruby\1.9.1\bin

Y no podía hacerlo funcionar. No recuerdo cuál era el error, si no podía poner a escuchar cambios o qué, pero para hacerlo jalar, copié el archivo “ruby.exe” del siguiente directorio, al del proyecto:

c:\ruby193\bin\

Y con eso tuvo, y funcionó adecuadamente. Creo que éste era el error (según las notas que tengo aquí guardadas):

is not recognized as an internal or external command, operable program or batch file. ruby.exe

Cabe mencionar que en ese entonces no usaba Bundler, sino que instalaba directamente SASS, Compass y Breakpoint. Desde que uso Bundler, no recuerdo haber tenido este problema.

"proyecto\vendor\bundle\ruby\1.9.1\bin\ruby.exe" no se reconoce como un comando interno o externo, programa o archivo por lotes ejecutable.

Espero que no tengan este error tampoco, sobre todo si deciden usar Bundler como les explico en este tutorial.

Configurar Console 2

En caso de haber decidido instalar Console 2 para Windows y no hacer uso de la línea de comandos que trae por default, déjenme darles algunos tips.

Hay que crear un “tab” adicional para usar con Ruby, porque es posible que no lo reconozca de inmediato. En la configuración (settings), añadir una nueva pestaña (tab). En “Shell text box type”, escribir:

C:\Windows\System32\cmd.exe /E:ON /K c:\Ruby\192\bin\setrbvars.bat

La ruta exacta a Ruby puede variar, y hay que reemplazar el 192 con la versión respectiva. Para el título (nombre del “tab”), se puede usar”Ruby 1.9.2″ (o su versión respectiva).

No estoy totalmente seguro en este punto, pero creo que se pueden ahorrar este problema cuando están instalando Ruby. Incluso lo pueden reinstalar si quieren. Lo único que hay que hacer es:

Add Ruby executables to your PATH

Eso debería encargarse del problema.

¡Comparte!

Si les gustó este tutorial, que tardó dos años en hacerse (no me griten), compártanlo con sus amigos desarrolladores.