LESS en un lenguage de hojas de estilo dinámico, que nos va a permitir tener unas hojas de estilos mucho más ajustadas y ordenadas. Cuantas veces nos hubiese gustado poder declarar variables en nuestros CSS. Pues bien, esa hora a llegado. Ahora podemos tener toda la potencia de LESS en nuestra plantilla Joomla.
Este manual no es esclusivo de Joomla, sino que podemos usarlo en cualquiera de nuestros proyectos PHP.
Hay tres opciones para poder usar LESS en nuestra plantilla Joomla:
Compilar LESS en cliente
Para compilar LESS en cliente, debemos descargarnos la libreria javascript de la página oficial de less: LESS
A continuación, incluimos la libreria después de nuestra hoja de estilos. El script, compilará de manera automatica nuestro código LESS, convirtiendolo en código CSS.
<link rel="stylesheet/less" type="text/css" href="estilos.less"/>
<script type="text/javascript" src="less-1.1.3.js"/>
Para mi es la menos recomendable de las tres opciones. Ya que además de descargar nuestros css, el cliente se tiene que descargar la libreria javascript. El navegador debe ejecutar el código javascript y compilar el código para convertirlo en css renderizable por el navegador, con lo que estamos perdiendo tiempo de carga de nuestra web.
Compilar LESS en servidor
Con esta opción, en vez de enviar nuestro código less al cliente, lo vamos a compilar al vuelo en servidor. Al cliente ya le va ha llegar nuestro código css.
Para ello he utilizado esta libreria php: Lessphp.
Hay diferentes maneras de usar la libreria, pero he creado un ejemplo sencillo de uso. Unicamente seria necesario un archivo css, que contendrá nuestro código less y un archivo index.php que incluira la libreria y renderizara el css.
estilos.css
@color: #f00;
body{background:@color;}
index.php
<?php
require "lessc.inc.php";
$less = new lessc;
?>
<!DOCTYPE html>
<html lang="es">
<head>
<title>Demo LESS</title>
<style type="text/css">
<?php echo $less->compileFile("estilos.css");?>
</style>
</head>
<body>
</body>
</html>
Si ejecutamos este pequeño código, vemos como el fondo de nuestra web se vuelve de color rojo, y como hemos renderizado el código less para convertirlo en css.
Pre-compilar LESS
Por último y tal vez la más recomendable de las tres opciones, sería compilar el código LESS antes de incluirlo en nuestra plantilla Joomla. Así, no tendríamos que gastar nuestro tiempo de procesador cada vez que nos pidan una página.
La forma más sencilla de hacer esto, tal vez sea simplemente tener un archivo PHP preparado en nuestro servidor local apache, que nos devuelva el codigo LESS ya interpretado.
Así que ahora toca ponerse manos a la obra y disfrutar de LESS en Joomla….
Muchas Gracias!!!
Una buena explicación para entender un poco como usar Less y por donde empezar.