programador

iván albizu

Main Blog

Blog

Usar Sass y Compass en Aptana bajo Windows

Logo Sass Aptana Compass

En este artículo trato de explicar las pasos a seguir para poder trabajar con Sass (metalenguaje de hojas de estilo que es interpretado a Css), usando como IDE Aptana Studio 3 bajo Windows. La instalación de Aptana se da por hecha.

Instalaremos Ruby para que el código creado con Sass sea interpretado a Css. Descargamos para ello la instalación de Ruby (a fecha de este artículo la última versión disponible es la 2.0.0.) y en mi caso será a 64 bits.

Pantalla descarga de instalador RUBY

http://rubyinstaller.org/downloads/

Es un ejecutable, no tiene más misterios.

Instalación finalizada de RUBY

En el ejemplo la intalación de Ruby está directamente en C, y la ruta es: C:\Ruby
Importante, esta ruta debemos tenerla presenta, ya que a través de la consola de Windows tenemos que instalar la “gema” de Compass.
Llegamos usando la consola hasta aquí: C:\Ruby\bin e  instalamos Compass: gem install compass.

Instalación de Compass en Windows

Si todo ha ido bien, deberíamos ver algo como esto:

Instalación de Compass con éxito

Con esto tenemos listo el ordenador con todas las herramientas. A partir de aquí ya sólo se trata de crear el proyecto.

Ahora creamos el proyecto con Aptana.

Proyecto Sass con Aptana

En este caso, el proyecto está en Documents (documentos) y se llama SassProjects.

Tenemos que usar la consola de Windows para crear la estructura de directorios sass y css, y el archivo de configuración config.rb (se crea automáticamente).
El comando de mi ejemplo es:

Estructura de directorios Sass

La estructura de nuestro proyecto es el siguiente.

Estructura de directorios proyectos Sass con Aptana

Cuando queramos trabajar en el proyecto debemos abrir la consola e introducir:

Convertir Sass a Css mediante consola

Cuando queramos terminar de trabajar con Sass pulsamos en la consola CTRL+C.

Detener la interpretación de Sass a Css

El texto que nos muestra la consola Windows dice que cualquier cambio que hagamos en nuestro fichero Sass será automáticamente actualizado en nuestra hojas de estilos Css.

Espero que pueda servir de utilidad este artículo.

Saludos.

Esta entrada tiene 0 comentarios

Deja un comentario





Time limit is exhausted. Please reload CAPTCHA.