Ya muchos de nosotros conocemos CSS, ha jugado un rol importante en la construcción de websites ya que nos permite aplicar los estilos a nuestros layouts.  A pesar de su fortaleza y simplicidad de por sí carece de caracteristicas fundamentales de un lenguaje de programación como variables, funciones u operadores. Como nuestra necesidad de crear páginas cada vez más complejas sigue en aumento han surgido nuevas herramientas para ayudarnos a gestionar y manjear las versiones de estos archivos sin romper la compatibiildad entre navegadores, de aquí es de donde ha surgido Less.

Leaner CSS ( Less) es un preprocesador de código CSS, es decir un lenguaje que permite añadir funcionalidades como variables, funciones y mixins a hojas de estilo CSS. Uno de sus grandes puntos es que nos permite la compilación en tiempo real ( a través de una libreria javascript)  por el navegador, también puedes ejecutarlo del lado del servidor, o bien pre compilarlo directamente en un archivo CSS

Less es una extensión del lenguaje CSS, lo que significa que un código CSS es también un código Less.

 

Integrando el compilador del lado del cliente less.js

La primera de las formas de trabajar es con un compilador del lado del cliente (less.js) que puede ser descargado desde aquí. Este script nos permitirá trabajar con archivos .less en nuestro proyecto de forma local, esta es una buena idea si estamos empezando con Less pero lo ideal es que lo utilicemos solo para aprendizaje y desarrollo. Para producción deberiamos obviar la compilación en cliente y utilizar los archivos ya precompilados.

Una vez que has descargado la librería javascript en tu directorio local podrás incluirlo en tu página web y disfrutar de las caráctéristicas de Less. El siguiente es un ejemplo de como se estructuraría un proyecto con la librería y Less:

lessPath

A diferencia de otras librerías, no es necesario que tengas configurado un servidor web para disfrutar de Less en tu cliente, ya que las rutas relativas o absolutas a la librería o a los ficheros less pueden apuntar a recursos locales, virtuales o en la web.

 

Para comenzar a trabajar con Less, debemos editar nuestro documento ( index.html en nuestro ejemplo) de la siguiente forma

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hola Mundo con Less</title>
<link rel="stylesheet/less" type="text/css" href="project.less" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script>
</head>
<body>
<header>La cabecera</header>
<section>Esto es un p&aacute;rrafo</section>
<footer>El pie de p&aacute;gina</footer>
</body>
</html>

Lo siguiente es añadir en nuestro archivo .less el siguiente código CSS:

1
2
3
4
5
6
7
8
9
header {
color: red;
}
section {
color: blue;
}
footer {
color: green;
}

A tener en cuenta

  • El compilador less.js compilará el código Less del fichero .less  que está enlazado mediante la directiva HTML  <link rel=”stylesheet/less” type=”text/css” href=”project.less” />
  • Debes especificar en el atributo rel el valor rel=”stylesheet/less” para que el compilador Less pueda reconocer el código.
  • La referencia al compilador less.js debe incluirse después de la referencia al fichero .less

Cuando recargas la página el código CSS compilado se inyecta dentro del documento HTML en un elemento <style> siguiendo las reglas normales de CSS. Puedes probar a cargar tu  página y con el inspector de código de tu navegador ver el estilo inyectado de forma similar al siguiente:

inyectedLess

 

La librería less.js implementa una función llamada “watch”, encargada de comprobar los cambios que ocurren en los archivos .less y recarga de forma automática la vista del navegador cuando encuentra algún cambio. Su utilización es muy sencilla, basta con añadir “#!watch”  después del url que deseamos obtener (para el index.html sería index.html#!watch).

 

 

Instalando el compilador lessc

Para la compilación del lado del servidor, Less viene con un compilador de linea de comandos para Node.js. Podemos descargar e instalarlo con el gestor de paquetes npm mediante la sentencia:

1
npm install --global less

Una vez que ya hemos instalado nuestro compilador, procederemos a crear un archivo Less sencillo ( ejemplo.less por decir un nombre):

1
2
3
4
5
6
7
8
9
10
@color: #ff3389;
header {
color: @color;
}
section {
color: @color+ #0000ff;
}
footer {
color: green;
}

Con el archivo ya modificado procedemos a compilarlo mediante la sentencia:

1
lessc ejemplo.less

Después de ejecutar dicho comando veremos la salida del código CSS en la consola:

1
2
3
4
5
6
7
8
9
header {
color: #ff3389;
}
section {
color: #ff33ff;
}
footer {
color: green;
}

Por defecto, el compilador lessc genera la salida por consola, claro que podemos redirigir la salida, se hace mediante la sentencia:

1
lessc ejemplo.less > ejemplo.css

Si ejecutas el comando lessc sin nigún parámetro podrás ver todas las opciones disponibles que ofrece el compilador.

Por ejemplo podemos “minificar” el archivo CSS que se generará mediante el siguiente comando:

1
lessc -x ejemplo.less > ejemplo.css

 

Aunque dicha opción está desfasada (Less recomienda un plugin para minificación de forma dedicada), puedes comprobar que el CSS se ha generado de forma “minificada”.  De igual forma puedes pasar otros argumentos para que la generación involucre otras opciones como –source-map, etc.

(Visited 262 times, 1 visits today)