Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Hosting

Xitrus está alojado en:

LESS: instalación y revisión

Ya os conté de que iba esto de LESS, pero ahora toca revisar los archivos hechos con LESS (que debemos de guardarlos en extensión .less) y se puede hacer de tres formas: en el cliente (que con JavaScript es posible), desde nuestro servidor (que el será directamente el que revise el archivo y lo transformará en CSS) y por último revisarlo en un editor u online y posteriormente usar el resultado (si no queremos estar haciéndolo con el servidor esta es la opción más recomendable).

La primera opción consiste en usar un archivo JavaScript que nos podemos bajar desde la web oficial y revisa en el cliente la hoja de estilo.


					
							<!-- Así es como se añade un archivo .less -->
							<link rel="stylesheet/less" type="text/css" href="[archivo].less">
							
							<!-- Añadimos el archivo JavaScript descargado previamente -->
							<script src="less.js" type="text/javascript"><script>

Este uso está recomendado para hacer pruebas o para hacer cosas sencillas y rápidas ya que no es recomendable para grandes proyectos (para ello es mejor revisarlo en el servidor o crear un CSS a partir del resultado).
Para que coja de esta forma los archivos .less debemos de establecer el parámetro rel como "stylesheet/less" y detras de los archivos .less el archivo JavaScript.

Servidor

Node.js

Para hacerlo desde un servidor tenemos varias opciones, la primera es la que desde la web oficial nos recomiendan, que es instalarlo en nuestro servidor Node.js, y se hace introduciendo en la consola lo siguiente:


					
							$ npm install -g less

Una vez instalado podemos pasar el archivo .less a .css revisándolo de la siguiente forma (el parámetro -x es el que se encarga de minificar el resultado).


					
							$ Lessc [archivo origen].less [archivo destino].css -x

Se puede crear el archivo CSS en tiempo de ejecución, pero es recomendable usar este para que sea más eficiente nuestra web.

PHP

Otra opción es usarlo en nuestro servidor PHP con lessPHP (podemos descargarlo desde aquí), que hace lo mismo que la opción anterior pero con este tipo de servidor, su funcionamiento es parecido (aunque este no se puede acceder por consola, que yo sepa), debemos de crear un script PHP que al ejecutarse nos compile el .less (se puede hacer más cosas con esto pero lo básico y más aconsejable es esto) y solo crea el archivo al ejecutarlo si el .css que establecemos no existe o es antiguo.


					
							<?php
						
								require  "lessc.inc.php";

								$less = new lessc;

								$less -> checkedCompile("[archivo origen].less","[archivo destino].css");

						
							?>

Revisarlo y exportarlo

Esta es la opción que más recomiendo por ser rápida y fácil, que consiste en revisar el código LESS y pegarlo en el archivo .css, y para esto hay unas cuantas herramientas:

SimpLESS: esta herramienta es de escritorio y es multiplataforma (Windows, Linux y Mac OSX).
Crunch: esta herramienta también es multiplataforma, ya que esta hecha con Adobe Air.
Less Tester: este es el revisor online que recomendé usar en la introducción, y por supuesto es el más multiplataforma.

Comentarios