Recientemente me he iniciado en Compass. Me animó un amigo dado que se ahorra un montón de tiempo al picar código. La verdad es que engancha y una vez empiezas es difícil parar.

Antes de empezar, recomiendo cercionarte que tienes todo lo necesario, en cuanto a programas (yo hablaré de Mac porqué es lo que uso pero se pueden encontrar equivalentes), para editar con fluidez compass:

  1. Consola:
    Éste es fácil, el terminal viene instalado en todos los mac.
  2. Gestor de archivos FTP:
    Personalmente me gusta Transmit, ya que tiene algunas características que agilizan los procesos de subida y descarga de archivos.
  3. Editor de código:
    Últimamente estoy usando Sublime, ya que es ligero y de aspecto personalizable. Pero también podéis user Textwrangler u otro similar…

Otra alternativa es usar programas que engloban el editor y el gestor de archivos todo-en-uno, cómo DreamWeaver. Personalmente, y a pesar de usarlo habitualmente si no tengo que usar Compass, me da mucha pereza usar Dreamweaver ya que existen plugins para integran Compass pero no es lo mismo.

Una vez ya tenemos todos los programas instalados y funcionando vamos a instalar Compass.

Abriremos el terminal y escribiremos los siguientes comandos:

gem update --system
gem install compass

Si tenemos problemas de permisos, que es lo más probable, deberemos poner lo mismo pero con sudo delante, cómo se muestra a continuación:

sudo gem update --system
sudo gem install compass

Nos pedirá una contraseña y es la del ordenador, ya que cómo la mayoría de instalaciones importantes nos pide por seguridad.

Una vez instalado, ya podemos crear nuestro primer proyecto de Compass. Para ello, navegaremos hasta la carpeta que queramos crear nuestro proyecto.

Guía express de terminal:

  • cd nombredelacarpeta: entramos en carpetas
  • cd ..: vamos a la carpeta padre de la que estamos
  • ls: muestra una lista de los archivos y carpetas de dónde estás
  • tabulador: autocompleta el nombre que hemos empezado a escribir

Una vez en la carpeta creamos el proyecto de compass:

compass create

Y nos creará los siguientes archivos y carpetas:

  • config.rb: tiene toda la configuración. Nombres de las carpetas por defecto, si los CSS se compilarán comprimidos, compactos o expandidos…
  • sass: carpeta que alberga los archivos .scss. Estos son los archivos que vamos a editar.
  • stylesheets: carpeta en la que compila los archivos .css, que son los que vamos a subir a nuestro servidor.

Pues bien, ya estamos. Ahora ya se puede abrir el screen.scss y empezar a programar en Compass. Una vez tengamos nuestro scss hecho lo compilaremos en el terminal, estando aún en la carpeta del proyecto:

compass compile

Esto actualizará los archivos css. Para cambiar los nombres de los css debemos cambiar los nombres de los archivos scss, al compilar creará los nuevos css.

Si queremos cambiar el nombre de las carpetas deberemos cambiarlo, a parte de la propia carpeta, en el archivo config.rb.

Un truco práctico para no tener que estar todo el rato compilando es escribir este comando en el terminal:

compass watch

Esto lo que hará será que cuando el scss se modifique y guarde, automáticamente se compile y nos cree los css.

Espero que esta mini guía os haya servido de ayuda cómo me va a servir a mí de referencia y si queréis profundizar más estad atentos a los siguientes posts o visitad compass-style.org.

Categorías: Compass
Si necesitas una url corta puede usar: codygo.es/756

Deja un comentario