Configurando CSS/Less, desarrollando en Linux

2012-11-01_less
Standard

Descargué el compilador less para ruby para compilar las hojas de estilo antes de verlas en el navegador. Aunque Geany me permite compilar con sólo presionar un botón, me interesó la posibilidad de permitir al servidor encargarse de interpretar el archivo de forma sólo tuviera que refrescar el caché de navegador. He aquí lo que tuve que hacer.

Interpretando LESS del lado del servidor

Dependencias

  • ruby
  • rubygems 1.8
  • less gem

Para probrar que esté instalado perfectamente deberás tener el siguiente comando en la terminal “lessc“. En mi caso instalé less usando el repositorio de gem 1.9

Instalando

  1. Clonar el repositorio
  1. Navegar hasta la carpeta “src" del repositorio clonado
  2. Ejecutar como root el siguiente código que compilará y copiará el módulo a la carpta correspondiente (“/usr/lib/apache2/modules/mod_less.so”)
apxs2 -c -i mod_less.c

Configurando

  1. En la carpeta del repositorio git navegar a la carpeta “bin“.
  2. Debemos copiar los archivos de configuración en apache. En Gentoo esos archivos se encuentran en /etc/apache2/modules.d/ y vienen numerados. En este caso los nombré usando el número 99 como prefijo con la intención de que fuera lo último que cargara. Así que copiamos (como root).
cp libapache2-mod-less_beta1/bin/less.load /etc/apache2/modules.d/99_mod_lessLoad.conf
cp libapache2-mod-less_beta1/bin/less.conf /etc/apache2/modules.d/99_mod_less.conf
  1. Listo, recargamos apache y debería funcionar.
/etc/init.d/apache2 reload

Uso

Para usarlo de acuerdo a la configuración todo archivo css será recompilado por less y ese archivo recompilado servido en lugar del archivo css original (Aquí la explicación). Así que cambio la extensión de mi archivo .less a .css y pruebo. Magia, el compilador funciona creando la copia en el directorio. En principio no resultó por un error en los permisos.

Desventajas

Lamentablemente también procesará CSS aunque no contengan nada de código LESS dentro de ellos. Lo cual para mi es un problema, sin embargo me pregunté si podría usarlo sin cambiar la extensión.

Mejorando la configuración

Lo que quería lograr es que los archivos less fueran procesados por apache y los archivos no, de manera que no procesara de más. En teoría sonaba como algo sencillo y en la practica lo fue más aún. Para ésto cambié la siguiente línea del archivo de configuración less.conf

<FilesMatch "\.css$">
   SetHandler less
</FilesMatch>

por:

<FilesMatch "\.less$">
   SetHandler less
</FilesMatch>

En el html en lugar de llamar main.css mandé llamar a main.less

<link rel="stylesheet" href="../css/main01.less">

Recargamos apache (“/etc/init.d/apache reload”), vaciamos el caché del navegador y al recargar la página nos damos cuenta que no pasa nada. Después de pensarle un poco pensé que posiblemente tenía que ver con los MIME types. La terminación .less no significa nada para apache o el servidor, hay que decirle lo que es para que el navegador pueda traducirla en estilos bonitos. Para esto nos vamos al .htaccess de nuestro servidor. También podría hacerse desde la configuración del vhost en apache, aunque eso no lo probé personalmente.

En .htaccess agregamos la siguiente línea.

AddType text/css .less

Vaciamos el caché del navegador, recargamos y ¡listo! Tenemos un servidor que sólo traduce los archivos less y el resto de archivos css los sirve de manera normal sin crear duplicados innecesarios en el servidor.

Pero… ¿y el desarrollo? Usando cssrefresh.js

Lamentablemente sigue siendo bastante engorroso refrescar el navegador para ver los resultados de lo que estamos haciendo. Como escuchado por los dioses recién leí un pequeño escrito (http://www.sitepoint.com/cssrefresh-instant-css-testing/) sobre una herramienta en Javascript diseñada para evitarnos refrescar el navegador.

Es un pequeño script que revisará la lista de archivos CSS por cambios en la fecha de modificación. Si detecta algún cambio instruye al navegador a refrescar la página. Hace esto cada segundo por lo que casi inmediatamente después de salvar el archivo CSS se verán los cambios reflejados. Para usarlo sólo tenemos que añadir el script a nuestra página.

<script type="text/javascript" src="js/cssrefresh.js"></script>

Es increible, el problema es que sólo funcionará con archivos CSS, para archivos LESS no funcionará ni del lado del servidor ni del lado del cliente. Entonces… ¿Regresamos a las mismas? No exactamente. Si, podríamos dejar LESS, o podemos instruir a la aplicación para que haga todo por nosotros. Recordemos que tenemos instalado el compilador de LESS en ruby que podemos llamar desde la línea de comandos, o en mi caso configurarlo desde el editor de código. En geany configuré para los archivos LESS el siguiente comando para compilar:

lessc %f > %d/%e.css

Este comando lo que hace es compilar el archivo “style.less” y escribir uno nuevo que se llame “style.css”. Lo llamo en Geany usando la tecla ‘F8’. En conjunción con cssrefresh, que registra cuando hemos cambiado “style.css”, tenemos el estilo interpretado en el navegador justo después de correr el comando. La ganancia está en que para poder correr el comando Geany salva primero el archivo y luego corre el comando de compilación. Intercambiamos <CTRL + S> + <ALT + TAB> + <F5> por <F8>

De esta manera, la mitad de la pantalla es para el editor y la otra para el navegador, lo cual me recuerda cuando empecé a usar “Web Developer Bar” en firefox al editar CSS. todos los cambios que haces se reflejan de manera casi instantánea en el navegador. Es sencillo probar nuevas ideas y más eficiente refinar el diseño.

Firefox en la mitad superior, Geany debajo. En firefox tenemos abierto Developer Tools para editar el HTML en tiempo real.

Enlaces

Puedes descargar la entrada en PDF (Por lo pronto sin imágenes). config_Less-develop-Linux-0.9

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s