Ayer tuve la oportunidad de acudir a Mecus a participar en un Taller de Programación de Less impartido por Pedro Carrillo. He de reconocer gratamente que me encantó la experiencia debido sobre todo al intercambio de información y pareceres sobre el desarrollo en distintos sistemas operativos.
Allí nos encontramos con varias máquinas, unas con Windows, otras con Mac OS X e incluso alguna con Ubuntu instalado.
Tras exponer un resumen teórico sobre qué era Less nos dispusimos a programar un ejemplo, yo en principio opté por desarrollarlo bajo MonoDevelop 2.4.1, pero fue imposible debido a sus contínuos cuelgues, posteriormente use Visual Studio 2010 Professional con @Penyaskito y aquí es donde las cosas empezaron a funcionar, por un lado por usar Visual Studio que no se colgaba y por otro por la maestría de Peñaskito que solucionó un problema de base en la programación de Less.
El siguiente sistema operativo que hizo funcionar bien el ejemplo fue Ubuntu y el resultado con Mac OS X a mi ida no fue esperanzador (aunque en el macbook blanco de Pedro Carrillo si funcionaba).
El código resultante es el siguiente:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link rel="stylesheet/less" type="text/css" href="Less/Style.less"/> <script src="Scripts/less-1.0.35.min.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div id="penyaskitoMira"> lalalalalalalalalalaalala </div> </form> </body> </html>
Por lo visto es importante poner la línea que incluye el archivo less que el de carga del script, de esta manera Less sabe que tiene un archivo que procesar. Es decir, primero esta:
<link rel="stylesheet/less" type="text/css" href="Less/Style.less"/>
Y luego esta:
<script src="Scripts/less-1.0.35.min.js" type="text/javascript"></script>
El contenido del archivo less es este:
@color:#FF00FF;
@borde:#FFFFFF;
#penyaskitoMira
{
background:@color;
border:@borde - @color;
}
Para aprender sobre Less es muy recomendable seguir la presentación de Pedro Carrillo al respecto, pero aquí voy a explicar un poco. Si observamos el código de Less posee 2 palabras que comienzan por @ que son:
- @color
- @borde
El uso de la @ (arroba) delante de una palabra la convierte en una variable, así podemos decir que Less es un extensión de CSS que permite el uso de variables.
La asignación son los dos puntos : y para usar cadenas hay que utilizar las comillas dobles «.
Por otro lado y ya para finalizar el post dar las gracias a la organización del taller y a las dos empresas que han puesto su esfuerzo en realizarlo que son Mecus y Kitiplá.
Un paso más cerca de Japón 