Hojas de estilo CSS modernas con Less

Publicado el en la categoría Diseño y Programación

lessLess es un preprocesador de hojas de estilo CSS que extiende el lenguaje y añade características avanzadas como variables, mixins, funciones y mucho más, lo cual permite dinamizar nuestras hojas de estilo para hacerlas más mantenibles y extendibles sin complicar el desarrollo de nuestras hojas de estilo, ya que Less usa la misma sintaxis básica que CSS.

A continuación os mostramos algunos ejemplos básicos que ilustran a la perfección las características dinámicas que Less proporcina a tus hojas de estilo:

Uso de variables

// declaración de variables
@anchura-borde: 1px;
@rojo: #842210;
// uso variables
div#header {
    border: @anchura-borde solid @rojo;
}

Se compila a

div#header {
    border: 1px solid #842210;
}

Uso de mixins y mixins paramétricos

// mixin paramétrico con valor @radio de 5px por defecto
.borde-radio-por-defecto(@radio: 5px) {
    border-radius: @radio;
    -moz-border-radius: @radio;
    -webkit-border-radius: @radio;
}
#borde-por-defecto {
    .borde-radio-por-defecto;
}
#borde-ancho {
    .borde-radio-por-defecto(30px);
}

Se compila a

#borde-por-defecto {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#borde-ancho {
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
}

Uso de funciones incluidas en Less

@color-base: #f04615;

#fondo-normal {
    background-color: @color-base;
}
#fondo-claro {
    background-color: lighten(@color-base,20%);
}
#fondo-oscuro {
    background-color: darken(@color-base,30%);
}

Se compila a

#fondo-normal {
    background-color: #f04615;
}

#fondo-claro {
    background-color: #f69275;
}

#fondo-oscuro {
    background-color: #651c07;
}

¿Cómo uso Less en mi página web?

Existen varias formas de compilar una hoja de estilos Less, desde el servidor usando Node.js, desde el lado del cliente o usando una herramienta de terceros que transforme nuestro código Less a CSS.

La más sencilla para empezar a desarrollar nuestra hoja de estilos es desde el lado del cliente, para ello hay que enlazar nuestra hoja de estilos Less en nuestro código HTML

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

El siguiente paso es incluir el procesador de Less que convierte el código en CSS estándar dentro del tag <head> de nuestro HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.3.1/less.min.js"></script>

Debemos asegurarnos de incluir primero la hoja de estilos y después el procesador.

Es recomendable que una vez nuestra hoja de estilos está terminada usemos una herramienta de terceros que genere un único archivo CSS para ganar en rendimiento y fiabilidad.

Referencias:

http://lesscss.org/ Página oficial de Less

http://less2css.org/ Procesador online de Less -> CSS

Facebooktwittergoogle_plus