Introducción a SASS y automatizar compilado desde IDEs basados en eclipse

Logo SASS

Cuando llevas un tiempo trabajando con aplicaciones web, empiezas a darte cuenta de las carencias que tiene CSS.

Es un lenguaje que en su versión 3 está bastante avanzado, pero sigue siendo difícil de mantener, reutilizar y personalizar.

Para solucionar este problema en los últimos años han proliferado lenguajes que permiten añadirle a CSS el dinamismo del que carece, siendo los más utilizados LESS y SASS.

Gracias a estos lenguajes podremos hacer uso de variables y funciones en hojas de estilos, así como importar otros archivos o anidar elementos, cosas que de por sí no son posibles con CSS.

Con LESS y SASS se generan archivos que después son interpretados y compilados, generando como salida una hoja de estilos CSS estándar que podremos añadir en cualquier página web.

Hay infinidad de formas de compilarlos. Por defecto LESS se compila con librerías de javascript, y SASS con ruby, pero existen diferentes aplicaciones de escritorio y en linea de comandos que realizan esta acción.

Tras varias pruebas mi conclusión es que SASS es algo más avanzado que LESS, así que voy a explicar el proceso de integración de hojas de estilo SASS en un proyecto web sin que ello suponga un trabajo extra, automatizando al máximo todas las tareas posibles.

Por defecto SASS soporta dos nomenclaturas. La más antigua usa la extensión de archivo sass y se basa en la anidación de elementos mediante tabulaciones, y la que se usa actualmente usa la extensión scss e introduce las llaves para anidar instrucciones. Esta última se parece más en su sintaxis a LESS.

Tanto en un entorno UNIX como en Windows la opción más recomendable para compilar SASS es usar la aplicación oficial en ruby, ya que al ser en linea de comandos podremos automatizar su ejecución, además de que es capaz de escuchar cambios en determinados ficheros para compilarlos automáticamente.

En Linux tendremos que instalar los binarios de Ruby y el gestor de paquetes de Ruby Gems, bien mediante yum, aptitude o apt-get, dependiendo de la distrubución.

En Windows basta con descargarse el instalador de ruby, lo que instala la aplicación en la carpeta c:/RubyXXX (XXX es el número de versión) y añadir al PATH la carpeta c:/RubyXXX/bin. Esto nos da acceso a los binarios de ruby y a gems desde la consola.

Una vez hecho esto, tanto en Linux como en Windows, abrimos una consola y ejecutamos el comando

gem install sass

Esto sería suficiente, pero vamos a instalar también compass. Esta aplicación lleva SASS un paso más allá, añadiendo más funciones a la librería estándar, extensiones de usuarios, etc. Todo ello usando la sintáxis de SASS.

gem install compass

Esto ya nos deja el entrono preparado para compilar SASS.

Por ejemplo, supongamos que tenemos una carpeta sass en nuestro proyecto con los archivos scss y otro directorio css con las hojas de estilo generadas. El comando a ejecutar sería el siguiente.

compass compile -s compressed --no-line-comments --sass-dir "sass" --css-dir="css"

Usamos el comando compass y le indicamos que compile los archivos en la carpeta sass (–sass-dir “sass”) y que el contenido generado lo deposite en la carpeta css (–css-dir=”css”).

Además le indicamos que no incluya comentarios extra en el archivo de salida (–no-line-comments) y que lo comprima (-s compressed), eliminando espacios, tabulaciones y saltos de linea innecesarios.

Con eso sería suficiente, y funciona igual en Linux y Windows. Siempre que queramos generar los archivos de CSS ejecutamos ese comando y compass revisará todos los archivos scss en busca de cambios, pero esto tiene el problema de que mientras se desarrolla una web el CSS va a cambiar constantemente, y tener que hacer esto a mano cada vez supone un incremento en el tiempo de desarrollo. Bueno, pues hagamos que sea el IDE el que ejecute el comando cada vez que guardemos un archivo scss.

Yo suelo trabajar con Eclipse o IDEs basados en Eclipse (Aptana, Zend Studio) para el desarrollo de aplicaciones web, ya que son robustos y muy configurables, además de que hay una gran comunidad detrás de ellos, lo que hace que mejoren constantemente y que tengan una gran cantidad de plugins.

Estos son los pasos a seguir. Seleccionamos el proyecto que queramos y vamos al menú Project -> Properties y en el menú de la izquierda vamos a la sección Builders. Ahí le damos el botón New…

properties

 

En la siguiente ventana le indicaremos a Eclipse qué comando ejecutar y en base a qué parámetros hacerlo. En la pestaña Main debemos indicar la localización del programa a ejecutar. En mi caso es C:\Ruby200\bin\compass.bat, pero dado que hemos agregado el direcotrio bin de ruby al path del sistema, también podemos poner ${system_path:/compass.bat} y funcionará.

También hay que indicar el directorio de trabajo, que normalmente será el directorio del proyecto. Asumiendo que el proyecto se llama Temp, pondremos ${workspace_loc:/Temp}.

Por último en el campo de argumentos pondremos los argumentos antes citados añadiendo –quiet para que no muestre por consola ningún mensaje que no sea un error.

compile -s compressed --no-line-comments --sass-dir "sass" --css-dir="css" --quiet

main

 

En la pestaña Refresh seleccionamos la opción Refresh resources upon completion, y después la última opción, Specific resources y pulsando en el botón que hay al lado seleccionamos la carpeta css dentro de nuestro proyecto.

Esto hará que siempre que se compilen archivos scss generando las correspondientes hojas de estilos, refresque la carpeta de destino.

refresh

 

En la pestaña Environment no hay que cambiar nada.

Por último en la pestaña Build Options dejaremos marcadas las opciones que ya lo estén y en la sección Run the builder seleccionaremos también During manual builds y During auto builds.

También marcaremos la opción Specify working set of relevant resources, y con el botón que hay a la derecha seleccionaremos la carpeta sass dentro del proyecto, con lo que haremos que este comando sólo se ejecute al modificar un archivo dentro de esa carpeta, ignorando el resto.

build-options

 

Y listo. Guardamos los cambios y ya tenemos el proceso automatizado. Ahora siempre que se modifique un archivo dentro de la carpeta sass, automáticamente se generará un archivo con el mismo nombre pero con la extensión css dentro de la carpeta css.

Podríamos decir que con eso ya está, pero queda otro paso. Si tenemos un servidor de Integración Continua que se encarga del despliegue de la aplicación, y asumiendo que en nuestro repositorio sólo tendremos los archivos SASS y no los CSS, necesitaremos que este compile los archivos antes del despliegue.

Para ello, podemos ejecutar el mismo comando desde ANT (por ejemplo) de la siguiente manera.

<project basedir="." default="compass" name="compile-and-minify-sass">

    <property name="css.dir" value="css" />
    <property name="sass.dir" value="sass" />

    <target name="compass" description="Compiles and compresses all sass files using compass">
        <exec executable="compass.bat" failonerror="true">
            <arg value="compile" />
            <arg value="-s" />
            <arg value="compressed" />
            <arg value="--no-line-comments" />
            <arg value="--sass-dir" />
            <arg value="${sass.dir}" />
            <arg value="--css-dir" />
            <arg value="${css.dir}" />
        </exec>
    </target>

</project>

Con eso ya habríamos terminado. Ya no hay excusa para usar SASS. Sólo queda familiarizarse con la sintaxis, para lo cual la documentación oficial es bastante buena.

4 Comments

  1. Excelente, muchas gracias! despues de mirar 50.000 paginas por fin he aclarado un poco el tema. Voy a usar SASS para manipular foundation 5.

    Saludos!

    • Me alegro de que te haya sido de ayuda.
      Simplemente indicar que si usas alguno de los IDEs de Jetbrains orientados a desarrollo web, incluyen integración con LESS, SASS y Compass de serie y es bastante más fácil configurarlos.
      Más adelante quizás amplíe este artículo.

      Un saludo desde Calat!

  2. Tambien una solucion simple es utilizar Scout http://mhs.github.io/scout-app/ facilita mucho trabajar con el, simplemente se crea un nuevo proyecto, se selecciona la carpeta donde esta todo nuestro proyecto, luego se configura la carpeta sass de input, la carpeta css de destino y se pone a correr dandole play a un boton, scout se encargara de detectar cada vez que le demos guardar a nuestros archivos scss cuando detecta un cambio automaticamente genera el archivo css, es casi como darle guardar a nuestro css y luego solo queda refrescar el explorador donde estemos visualizando el maquetado, si por alguna razon escribimos mal algo, en la pantalla de scout mostrara que ocurrio un error y en que linea se localiza, es muy intuitivo y util.

Anímate a compartir con nosotros tus inquietudes y experiencias.

A %d blogueros les gusta esto: