Preprocesar hojas de estilo con LESS

Preprocesar hojas de estilo con LESS

LESS es una extensión de CSS

¿Qué significa esto? Que un documento CSS es un documento LESS válido. Esto nos va a permitir seguir trabajando con nuestras hojas de estilo de manera natural y hacer que adaptarnos a LESS sea fácil y ameno.

¿Cómo extiende LESS a CSS?

  • Permite el uso de variables. Así, podemos reaprovechar conceptos de colores, rutas. Incluso podemos componer variables con información del proceso que se realiza en el servidor o el tamaño de pantalla accediendo a Javascript (Esto depende un poco de cómo utilicemos LESS, que se explicará más adelante)
  • Mixin. El concepto de MIXIN puede ser familiar al de las clases de objetos. Con los MIXINs podemos encapsular funcionalidad. La mayor importancia de esto es que podemos resumir las pesadas reglas de los distintos navegadores en una sola parametrizable. ¡Nunca más habrá que poner -webkit-, -moz-, -ms-, -o, …!
  • Funciones. Con el uso de funciones podemos realizar operaciones sobre los colores, tamaños, paddings, etc. Incluso LESS viene de serie con funciones para tratar colores, pudiendo saturar, cambiar la intensidad o incluso calcular el color contrario de uno dado.
  • Importaciones: Esto nos aporta mucha modularidad en nuestras hojas de estilo, ya que podemos empezar a funcionar como si tuviéramos paquetes independientes que podemos reutilizar en nuestros proyectos.
  • Reglas encadenadas:  Nos permite agrupar funcionalidad en la misma regla, evitando tener que ser tan “verbosos” en nuestras hojas de estilo cuando tratamos elementos que están dentro de otros.

Maneras de implantarlo

La versión de LESS incluye el compilador en versión Javascript. Esto tiene ventajas e inconvenientes. Lo importante es que el procesado lo realiza el cliente: Evita al servidor de realizar una tarea tediosa pero por otra obliga al cliente, haciendo que la página tarde más en cargar y obligándole a tener que tener Javascript para poder ver la hoja de estilos.

Existen otras alternativas de procesar estas hojas de estilo. Algunas de ellas es NODE, Ruby o PHP.

Con PHP, combinando la generación de estas hojas de estilo con un simple sistema de CACHE podemos aprovecharnos de todas estas ventajas.

Aquí vamos a mostrar una idea básica de hacerlo desde PHP con la librería LESSPHP

<?php
// Incluimos las clases necesarias
require 'vendor/autoload.php' ;

// Plantillas que queremos procesar
$ficheros = array ('style/less/style.less', 'style/less/fondo.less') ;
$less = new lessc ();


// Para cada fichero
foreach ($ficheros as $fichero)
{
  // Carga la cache
  $cacheFile = $fichero . '.cache';
  $destFile = $fichero . '.css';

  if (file_exists ($cacheFile))
  {
    $cache = unserialize (file_get_contents ($cacheFile)) ;
  }
  else
  {
    $cache = $fichero ;
  }

  try
  {
    $newCache = $less -> cachedCompile ($cache);
  }
  catch (Exception $e)
  {
    die ('Error ' . $e -> getMessage ()) ;
  }
 

  if (! is_array ($cache) || $newCache['updated'] > $cache['updated'])
  {
    file_put_contents ($cacheFile, serialize ($newCache));
    file_put_contents ($destFile, $newCache ['compiled']);
  }
}

// Plantilla
include ('test.html') ;

Desventajas o pegas

El uso de LESS dependiendo del cliente no me parece una idea correcta pues estamos forzando requerimientos. Con esto haríamos que un cliente sin soporte javascript activado no cargara correctamente las hojas de estilo.

También creo ue es mucho más versatil que podamos manejar nosotros mismos la cache ya que podemos diseñar estrategias de producción y desarrollo mejor adaptadas a nuestras necesidades.

Comentarios

Sin comentarios
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí