por ¿Qué es?
En este tutorial, vamos a aprender a crear nuestras hojas de estilo CSS utilizando SASS y compass.
SASS (Syntactically Awesome Style Sheets) es una extensión de CSS que añade poder y elegancia al lenguaje básico. Permite usar variables, reglas, mixins, importar otros archivos, etc.
La web oficial de SASS la podéis encontrar en:
Compass es un framework de creación de CSS de código abierto, que contiene una serie de reglas y mixins. Nos va a permitir procesar los archivos SASS para convertirlos en CSS.
La web oficial de Compass la podéis encontrar en:
¿Para qué sirve?
Hasta hace relativamente poco tiempo, las hojas de estilo CSS que se encargan de poner bonito el html, dándole a sus elementos colores y tamaños o ubicándolos en la pantalla, se volvían difíciles de mantener, ya que era un «código espagueti», nada reutilizable. Si querías aplicar un estilo parecido a varias clases, tenías que copiar y pegar código, o cuando usabas colores hexadecimales, tenías que copiar y pegar su código por todo el archivo, porque CSS no permite declarar variables.
SASS viene a solventar todos los problemas del CSS anteriormente vistos, permitiendo declarar variables y funciones y distribuir el código en varios archivos, para tenerlo todo más organizado y poder reutilizarlo. Gracias a un preprocesador, como compass, estos archivos de SASS (usaremos la extensión scss) se convertirán en un solo archivo CSS minificado, de forma transparente para nosotros.
¿Cómo lo instalo?
Lo primero que necesitamos para instalar compass es descargar RubyInstaler:
http://rubyinstaller.org/downloads/
Seguimos los pasos del instalador. En esta pantalla marcamos todas las opciones:
Una vez terminada la instalación, abrimos una consola de comandos (cmd) y ejecutamos:
$ gem update --system$ gem install compass
Ahora podemos probar que está correctamente instalado ejecutando:
compass version
Esto nos dirá qué versión de compass hemos instalado. Yo tengo la 1.0.3.
Ya tenemos listo el entorno para crear nuestro css a partir de archivos sass, que compass se encargará de unificar y comprimir.
¿Por dónde empiezo?
Vamos a crear un proyecto nuevo, Dado que sólo usaremos HTML y CSS, podemos ubicar la carpeta del proyecto donde queramos. Yo voy a crearla en D:\Desarrollo\HTML\EjemploSASS. Ahora, abrimos una consola de comandos (Ejecutamos cmd) y navegamos hasta esta carpeta de proyecto que acabamos de crear.
En la consola de comandos ejecutamos:
compass init
Esto nos creará la siguiente estructura de directorios y archivos:
- .sass-cache: caché interna de archivos precompilados. No la tocaremos.
- sass: donde almacenaremos nuestos archivos sass. Por defecto, se crearán tres archivos con extensión SCSS, que son: ie.scss, para estilos específicos de Internet Explorer, que no vamos a usar en este tutorial, print.scss, para estilos específicos para impresoras, que tampoco usaremos en este tutorial, y screen.scss, que es el archivo que recomiendan para los estilos de la web o para aglutinar las referencias a otros archivos que importemos en nuestro proyecto, y es el que vamos a usar para este tutorial, aunque, para proyectos reales, podemos crear el nuestro propio si queremos. Si abrimos este archivo, nos dará información de cómo integrarlo en nuestro proyecto.
- stylesheet: donde se almacenan, por defecto, los archivos CSS generados. Este directorio no debemos de tocarlo.
- config.rg: archivo donde podremos cambiar la configuración de nuestro proyecto. Por ahora tampoco lo modificamos.
A continuación, vamos a crear nuestro archivo HTML, que será el que abramos en nuestro navegador. En la raíz del proyecto (al nivel de las carpetas anteriormente descrito), creamos un archivo al que llamaremos index.html. Su contenido será el siguiente:
<!DOCTYPE html> <html> <head> <title></title> <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> </head> <body> <div class="prueba"> Hola mundo, esto es una prueba. </div> </body> </html>
Nótese que incluimos la referencia a stylesheets/screen.css pero quitando la barra inicial que indicaba la ayuda de screen.scss.
Ahora vamos a editar el archivo screen.scss, para dar estilos a la clase «prueba» que hemos puesto en el html. Añadimos al final del archivo:
.prueba{
color: #FF0000;
}
Con esto, el color de nuestro texto cambiará a rojo. Pero si ejecutamos index.html (lo abrimos con nuestro navegador por defecto) veremos que no ha pasado nada… Nos falta dar el último paso; procesar el scss.
Desde la consola de comandos que teníamos abierta en el directorio raíz del proyecto ejecutamos lo siguiente:
compass watch
Con esto, compass se pondrá a la escucha y, cuando hagamos un cambio en nuestros SCSS, éste lo detectará y generará el CSS. Nos notificará por la consola de comandos lo que está haciendo.
Volvemos a lanzar nuestro index.html y… ¡el texto aparece en rojo! Si abrimos el archivo stylesheets/screen.css podremos ver cómo ha quedado nuestro css final.
Por no alargar más este tutorial, acabamos aquí y dejamos para próximos tutoriales otras características de compass y SASS, como declarar variables, separar en ficheros, minificar el código o anidar clases.
El código lo tengo compartido en mi cuenta de GitHub:
Hola Diego. Excelente guia para iniciarse. Recién acabo de descubrir compass y gracias a tus pasos lo tengo funcionando en mi Mac. ¿Tienes pensado seguir con esta serie de SASS/Compass? Saludos y gracias por compartir.