Uso de Sass y Compass para generar CSS

<h2> ¿Qué es Sass?</h2>

¿Nunca han sentido la necesidad de que el uso de variables en las hojas de estilo simplificaría mucho el trabajo?
¿Nunca han sentido que en lugar de estar repitiendo decenas de líneas sería mejor anidarlas?
La respuesta a esta y otras preguntas es Sass (Syntactically Awesome Stylesheets).

Sass aparece porque no es posible hacer todas estas cosas directamente en el css. Con ella podemos escribir y generar css de alta calidad rápidamente. Esto se debe a que es un metalenguaje cuya sintaxis es 99% igual al que se usa en una hoja de estilo común y corriente. Con ella podemos anidar selectores, hacer operaciones, definir variables, escribir funciones, etc. Una vez terminado lo único que tenemos que hacer es recompilar el archivo scss (es la extensión que usa Sass) y zas! genera un archivo css correctamente escrito. Además existe la opción de generar el css comprimido ó expandido.

A continuación algunos ejemplos tomados de la página http://sass-lang.com

<code>
Ejemplo de uso de variables en un archivo .scss
</code>

<code>
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}

.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}

table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}

li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}

</code>

<code>
El archivo css generado después de compilar sería
</code>

<code>
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}

.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}

table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}

li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}

</code>

<h2> ¿Qué es Compass?</h2>

Compass es una "extensión" para Sass para simplificar y automatizar muchas tareas.

http://compass-style.org/

<h2> Instalación en Debian Squeeze</h2>

Como esta librería está desarrollada en Ruby, necesitaremos el instalador de gems. Luego tenemos que activar el repositorio Debian Sid (unstable) para acceder a los paquetes que necesitamos.
No es necesario actualizar todo el sistema operativo Linux, podemos usar Synaptic para instalar los siguientes paquetes:

<code>
sudo apt-get install libhaml-ruby
sudo apt-get install ruby-compass
sudo apt-get install ruby-sass
sudo apt-get install rubygems
gem install haml
</code>

La primera librería <i>libhaml-ruby</i> contiene el paquete <i>sass-convert</i>, muy útil para convertir archivos .css a formato .scss . Sino se desea usar este comando podemos usar también este convertidor online

http://css2sass.heroku.com/

La segunda librería instala compass, la tercera sass y la última sirve para que podamos hacer debug de nuestros archivos .scss desde el Firebug usando el addon FireSass https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/

<h2>Trabajando con Drupal</h2>

Si ya tenemos un proyecto corriendo en css podemos convertirlo a scss. Por ejemplo:
a) Vamos a la carpeta /var/www/myweb/sites/all/themes/mytheme
b) Clonamos la carpeta /var/www/myweb/sites/all/themes/mytheme/css a
/var/www/myweb/sites/all/themes/mytheme/scss
c) Convertimos el <i>contenido</i> de todos los archivos css que aún están en la carpeta /var/www/myweb/sites/all/themes/mytheme/scss al formato scss usando el comando

<code>
find . -name '*css' -exec sass-convert -i {} \;
</code>

d) Renombramos todos los archivos de la carpeta
/var/www/myweb/sites/all/themes/mytheme/scss
para que tengan la extensión .scss usando el comando

<code>
for i in *.css; do mv -v ${i} ${i/css/scss};done
</code>

a formato css

e) Vamos a la carpeta

/var/www/myweb/sites/all/themes/mytheme/

para inicializar un proyecto de compass con el comando

<code>
compass init
</code>

f) El comando anterior generará una serie de archivos adicionales. De los cuales solo nos sirve el archivo <i>config.rb</i>
Los demás que hayan sido generados podemos borrarlos con el comando

<code>
rm -Rf stylesheets sass
</code>

g) Editamos el archivo <i>config.rb</i> de modo que quedé asi

<code>
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
sass_options = {:debug_info => true}
</code>

La última opción sólo se usa si queremos usar FireSass para Firebug para hacer debug directamente a los archivos con extensión scss.

h) Finalmente ejecutamos el comando

<code>
compass watch .
</code>

dentro de la carpeta

/var/www/myweb/sites/all/themes/mytheme/

para que el compass monitoree cualquier cambio que se haga en uno de los archivos .scss se replique en el archivo css que le corresponde. También es posible hacer el monitoreo usando directamentel comando

<code>
sass --watch scss:css --debug-info
</code>

donde scss y css son las carpetas con los archivos de extensión scss y css.

Eso es todo.

Fuentes

http://sawmac.com/2012/06/why-use-sass/
http://stackoverflow.com/questions/5571477/use-multiple-sass-files
http://groups.drupal.org/node/206148

Actualización 20/07/2012
Para usuarios de Linux Mint Debian
Según
http://community.linuxmint.com/software/view/libcompass-ruby

sudo apt-get install libcompass-ruby
sudo apt-get install rubygems
sudo apt-get compass

Etiquetas