Instalar Compass con Sass en windows

Qué es Sass

sass-getting-started

Sass es un pre-procesador CSS igual que Less o Stylus. Entre ellos no hay grandes diferencias, pero la ventaja que tiene SASS frente a los demás es que le puedes añadir utilidades como Compass y foundation zurb (parecido a Bootstrap).

Qué es Compass

compass-css-framework

Compass añade a Sass una gran cantidad de mixins, como border-radius, box-shadow y gradientes, lo que hace el CSS3 más fácil sin tener que agregar todas las etiquetas propias de cada navegador.

 

Empezando con la instalación

Lo primero que necesitas para que Sass funcione, es tener instalado ruby. Lo más fácil es que te bajes el instalador que tiene para windows. Lo puedes descargar de aquí.

En el proceso de instalación hay tres opciones para marcar:

  •  Install Td/Tk support
  • Add Ruby executables to yor PATH
  • Associate .rb and .rbw files with this Ruby installation

Yo marqué las tres, pero como mínimo debes marcar la segunda (Add Ruby executables to yor PATH).

 

Una vez terminada la instalación, ya podemos proceder a instalar Sass y Compass.

Lo mas sencillo es pasar directamente a instalar Compass, ya que te te instala Sass por defecto. Para ello abrimos la consola de windows (pulsamos tecla windows+R, escribimos cmd y pulsamos enter o bien pulsando la tecla windows, escribiendo cmd en el buscador y ejecutamos cmd.exe). Una vez abierta la consola, escribimos:

gem install compass

Si este comando os genera algún tipo de error parecido a este:

ERROR: While executing gem ... (Gem::RemoteFetcher::FetchError)
SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certif
icate verify failed (https://api.rubygems.org/specs.4.8.gz)

Podéis probar a instalarlo sin SSL mediante el siguiente comando:

gem install compass --source http://rubygems.org

Primero instalará Sass y luego procederá a instalar Compass.

 

Iniciando Compass

Una vez instalado Sass y Compass, procedemos a crear la configuración. Lo más sencillo es abrir la consola de windows y dirigirse al directorio donde en encuentre nuestro proyecto.

Por ejemplo, si tienes instalado Xampp y por defecto la carpeta raíz de Apache es C:/xampp/htdocs, nos dirigimos directamente a dicho directorio escribiendo:

cd C:/xampp/htdocs/

Una vez dentro de este directorio, escribimos (sin «»):

compass create "nombreproyecto"

Esto nos creará un directorio con los archivos necesarios para que Compass pueda funcionar.

Nos crea dos directorios y un archivo de configuración:

  • Directorio sass: Aquí es donde se encuentran los archivos scss.
  • Directorio stylesheets: Aquí es donde se colocan los archivos css generados por sass (mantiene el nombre de origen)
  • fichero config.rb: Este archivo es donde se encuentra el archivo de configuración para generar los archivos CSS. Aquí puedes cambiar la ruta de los directorios que compass genera por defecto y poder añadirle más opciones. Este fichero es necesario para su funcionamiento.

Una vez creados estos ficheros, ya podemos empezar a trabajar con compass. Para ello, en la consola escribimos:

compass watch

Esto actualizará nuestros ficheros css cada vez que realicemos o guardemos nuestros  archivos scss del directorio sass. De tener algún error en nuestro código, también nos avisará  y nos dirá en qué linea/as del código lo tenemos. Para terminar el proceso, podemos pulsar ctrl+C y después confirmamos con S o bien cerrando la ventana de la consola.

 

Otra opción para evitar usar la consola a la hora de trabajar con compass/sass, es usar la aplicación para windows Scout.

 

 

You may also like...

Deja una respuesta