LESS en Joomla

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.

Less en Joomla

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….

Esta entrada fue publicada en Plantillas. Guarda el enlace permanente.

Una respuesta a LESS en Joomla

  1. Manuel dijo:

    Muchas Gracias!!!
    Una buena explicación para entender un poco como usar Less y por donde empezar.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s