Por casualidad, he encontrado less para trabajar con CSS.
Lees en un lenguaje dinámico para trabajar con hojas de estilo que permite incluir variables, funciones y un buen número de características dinámicas, propias de la programación, a nuestras hojas de estilo.
Su funcionamiento es muy sencillo, simplemente utilizamos una sintaxis concreta para especificar un comportamiento dinámico (completamente basada en CSS para no tener que reaprender un nuevo lenguaje) y después y en tiempo de ejecución, todas nuestras instrucciones serán resueltas antes de devolver el código CSS final que el navegador entenderá perfectamente.
Cómo más vale un buen ejemplo que mil palabras, hay va nuestro primer fichero .less
@color-principal: #3879BD;@color-secundario: #f859Bf;.esquinas-redondeadas(@radius: 3px) {-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius;}#header{.esquinas-redondeadas;background-color: @color-secundario;}#content{.esquinas-redondeadas(5px);background-color: @color-principal;}
En este ejemplo:
- Utilizamos variables con @color-principal y @color-secundario.
- Utilizamos agrupación de propiedades (mixin) con .esquinas-redondeadas
El código CSS que resulta después de haber hecho su trabajo less es el siguiente:
#header {background-color: #F859BF;border-radius: 3px 3px 3px 3px;}#content {background-color: #3879BD;border-radius: 5px 5px 5px 5px;}
La verdad es que me parece todo un invento que intentaré utilizar en futuros desarrollos. Dicho queda.
Se puede utilizar less tanto desde el lado del cliente como del lado del servidor.
Para utilizar less desde el lado del cliente y olvidarnos de qué lenguaje estamos utilizando del lado del servidor:
- Crear nuestra hoja de estilos con las características less que creamos oportunas.
- Renombrar la extensión de la hoja de estilos a .less.
- Incluir la hoja de estilos en nuestra página con la siguiente sintaxis:
- <link href="Comun.less" rel="stylesheet/less" type="text/css" />
- Descargar la última versión del fichero .js desde la página de less. En mi caso es less-1.1.5.min.js.
- Incluir una referencia a nuestro fichero .js después de las hojas de estilo.
Y ya está, el fichero .js hará magia y todas las hojas de estilo con la extensión .less y el atributo rel igual a “stylesheet/less” serán procesados y convertidos a CSS convencional.
<!DOCTYPE html><html><head><title></title><link href="Comun.less" rel="stylesheet/less" type="text/css" /><script src="less-1.1.5.min.js" type="text/javascript"></script></head><body><div id="header">Cabecera</div><div id="content">Contenido</div></body></html>
Por otro lado, si trabajamos con ASP.NET también podemos utilizar less desde el lado del servidor y aprovecharnos de otras características extras como la minificación o cacheo de nuestras hojas de estilo.
La implementación de less en ASP.NET la puedes encontrar en dotlesscss.org. Lo que hace dotlesscss es agregar un HTTP Handler que procesará automáticamente todas las peticiones para ficheros .less. De este modo, el pre-procesamiento de estos ficheros se hará en el servidor y ya no será necesario el fichero .js que utilizamos desde el lado cliente.
Para hacer funcionar less desde el lado del servidor lo más fácil es utilizar NuGet e instalar el paquete dotless que agregará el ensamblado dotless.Core.dll y toda la información necesaria en nuestro fichero web.config.
Un ejemplo de cómo quedaría el web.config después de registrar el manejador, una sección personalizada, etc:
<?xml version="1.0" encoding="utf-8"?><configuration><configSections><section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler, dotless.Core" /></configSections><system.web><compilation debug="true" strict="false" explicit="true" targetFramework="4.0" /><httpHandlers><add path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler, dotless.Core" /></httpHandlers></system.web><dotless minifyCss="false" cache="true" web="false" /><system.webServer><handlers><add name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" /></handlers></system.webServer></configuration>
A partir de aquí, el mismo ejemplo anterior funciona exactamente igual desde el lado del servidor.
Fíjate además cómo ahora podemos incluso minificar el CSS obtenido si activamos el parámetro minifyCss:
#header{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background-color:#f859bf;}#content{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-color:#3879bd;}
Si utilizamos dotless, tenemos además otras ventajas:
- Podemos compilar automáticamente nuestro ficheros .less durante el build de nuestra aplicación y así obtener directamente el código CSS sin tener que agregar un manejador HTTP.
- Podemos utilizar funciones de dotlless directamente desde nuestro código sin tener que estar en el contexto de un fichero .less
Puedes encontrar documentación sobre dotless en el siguiente enlace https://github.com/dotless/dotless/wiki
Aunque hoy sólo hemos visto las variables y el mixing, te adelanto que less son muchas más cosas como operaciones, funciones, espacios de nombres, etc.
Por cierto, no dejes de leer el siguiente enlace de nuestro amiguito Scott Mitchell que lo explica perfectamente http://www.4guysfromrolla.com/articles/030310-1.aspx o también este artículo de Gisela Torres que está muy bien http://www.returngis.net/2013/03/less-preprocesador-css-con-soporte-en-visual-studio-2012/
Yo le voy a dar una oportunidad ¿Y tú?
Un saludo!
Como mola! La verdad, no tenía ni idea de que existia. Lo has explicado genial, muy buen post!
ResponderEliminarGracias Carlos ;-)
ResponderEliminarMuy bueno y muchas gracias por la información.
ResponderEliminarLo que no me agrada es... "más conocimientos para casi lo mismo" Para una página web ya tenemos que saber programar:
- En un lenguaje como php, asp, .net etc.
- En HTML
- En CSS (less)
- En Javascript
- En...
... y en Base de Datos claro !