Hojas con estilo usando .less

 

.Less: CSS Dinámicos para .NET Seguro que más de una vez has sufrido de lo lindo al tocar un archivo de hoja de estilos. Suelen estar mal organizados, ser muy extensos, difíciles de mantener, hay declaraciones duplicadas por todas partes… Y seguro que siempre te has preguntado si hay otra forma menos complicada de conseguir lo mismo.

K. Scott Allen nos habla en su post Keeping CSS Files DRY de .Less (dot less), un interesante componente portado del mundo Ruby capaz de “compilar” hojas de estilo que utiliza una notación extendida y mucho más potente del estándar CSS, permitiendo las siguientes características:

  • Uso de variables. Less permite declarar y utilizar variables para los valores que utilizaremos frecuentemente en nuestra hoja de estilos, así:
    @nice-blue: #5B83AD;

     

    #header { color: @light-blue; }

    #footer { color: @light-blue; }

  • Operaciones. Podemos utilizar expresiones para obtener valores, por ejemplo:
    @base: 5%;

    @filler: @base * 2;

    @other: @base + @filler;

     

    color: #888 / 4;

    background-color: @base-color + #111;

    height: 100% / 2 + @filler;

    Fijaos en un detalle de lo más interesante: Less es capaz de distinguir cuándo está operando con colores y cuándo con unidades, ofreciendo el resultado correcto en cada caso.

  • Mezclas (mixins), otra potente capacidad de Less que seguro que puede venirnos bastante bien, que consiste en incluir dentro de un conjunto de reglas dentro de otro, sólo haciendo referencia a su selector:
    .bordered {

      border-top: dotted 1px black;

      border-bottom: solid 2px black;

    }

     

    #menu a {

      color: #111;

      .bordered;

    }

     

    .post a {

      color: red;

      .bordered;

    }

  • Reglas anidadas, que nos permiten definir reglas siguiendo una estructura más legible y fácilmente reconocible por su paralelismo con la estructura del documento:
    #header {

      color: black;

     

      .navigation {

        font-size: 12px;

      }

      .logo {

        width: 300px;

        :hover { text-decoration: none }

      }

    }

  • Visibilidad de variables. Las variables pueden ser declaradas de forma global (como en el primer ejemplo) o asociadas a algún selector, lo que les aporta ámbito de visibilidad de forma muy similar a los lenguajes tradicionales:
    @var: red;

     

    #page {

      @var: white;

      #header {

        color: @var; // color será “white”

      }

    }

  • Accesores. Less permite utilizar valores de propiedades y variables como contenido para otras propiedades de forma muy natural:
    #defaults {

      @width: 960px;

      @color: black;

    }

     

    .article { color: #294366; }

     

    .comment {

      width: #defaults[@width];

      color: .article['color']; 

    }

    Fijaos que el bloque #defaults no tiene por qué corresponder con un elemento del documento a formatear, se trata sólo de una forma de agrupar variables y reglas, consiguiendo un efecto empaquetador muy similar a los espacios de nombres.

  • Comentarios en línea, al más puro estilo C++ ó C#:
    // Get in line!

    @var: white;

  • Importación de archivos, permitiendo acceder a reglas y variables definidas en otros archivos:
    @import "library"; // Si la extensión es .less, se puede omitir

    @import "typo.css";

¿Y cómo funciona esto? Muy sencillo. En primer lugar, escribimos la hoja de estilos en un archivo .less, en el que podemos utilizar las características descritas anteriormente, y lo incluimos en las páginas donde nos interese, como lo hacemos siempre:

<link href="/Content/estilos.less" rel="stylesheet" type="text/css" />

Es interesante tener en cuenta que Less es compatible con CSS, lo que quiere decir que si simplemente renombramos el .css a .less, ya tendremos una hoja de partida.

A continuación, debemos introducir en el web.config una declaración que asocie la extensión .css al compilador Less:

<httpHandlers>

  <add validate="false" path="*.less" verb="*"

    type="dotless.Core.LessCssHttpHandler, dotless.Core" />

</httpHandlers>

Cuando llega una petición, el handler se encargará de compilar el archivo .less, generar el .css correspondiente y enviarlo minimizado al cliente, cacheando el resultado para posteriores usos, si se lo indicamos en la configuración, una sección opcional del web.config.

.Less está diseñado para ASP.NET 3.5 o superior, y por supuesto, es válido tanto para Webforms como para ASP.NET MVC. Se distribuye bajo licencia Apache 2.0, y está aún en fase beta, por lo que habrá que estar atento a la evolución de este interesantísimo proyecto.

Enlaces:

Crosspostergado desde: Hojas con estilo usando .less @ Variable not found 

Un comentario sobre “Hojas con estilo usando .less”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *