Less: Un framework para hojas de estilo de forma dinámica

Categoria : Diseño Web, Lenguajes de Programación · Por Mar 17th, 2012

A medida va transcurriendo el tiempo, muchas tecnologías, frameworks y lenguajes de programación van quedando obsoletos, y a la vez van surgiendo soluciones que logran ahorrar recursos dentro de una organización. Hoy hablare sobre la “evolución” de CSS (Cascading Style Sheets). Muchos programadores FrontEnd (Los que programan la parte visual en una aplicación…) les gustaría ahorrarse tiempo escribiendo hojas de estilo (CSS), esto se puede lograr mediante el framework Less.

Definamos Less

Te comento que Less extiende a CSS con un comportamiento dinámico, gracias a variables, mixins, operaciones y funciones lo gusta a todo programador. Un aspecto muy importante es que Less se ejecuta tanto en el lado del navegador (Chrome, Firefox y Safari) como en el lado del servidor con Node.js y Rhino.

Incluyendo Less en nuestros proyectos

Client-side (Lado del navegador)

Incluye tu hoja de estilo antes que la librería de Less de la siguiente forma:
[cc lang=”css” tab_size=”2″ lines=”40″] [/cc]
Luego incluye la librería de Less, la cual puedes descarga Aca ambas lineas dentro de la etiqueta <head>. Un regla de Less, es incluir tu(s) hoja(s) de estilo antes del llamado de Less.
[cc lang=”javascript” tab_size=”2″ lines=”40″]


[/cc]

Client-side (Lado del servidor)

La forma mas rápida de instalar Less en tu servidor es utilizando la utilidad npm de la siguiente forma:
[cc lang=”html” tab_size=”2″ lines=”40″]
$ npm install less
[/cc]

¿Como es la sintaxis de Less?

Como mencione anteriormente, Less incluye elementos que nos ahorran al momento de codificar una hoja de estilo (CSS), su sintaxis es bastante fácil, veamos un ejemplo:
[cc lang=”css” tab_size=”2″ lines=”40″]
// CSS TRADICIONAL

#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

// EJEMPLO CON LESS

@color: #4D926F;

#header {
color: @color;
}
h2 {
color: @color;
}
[/cc]

Mas ejemplos sobre Less Aqui…

Algunos tutoriales de Less (Ingles)

Sitio Oficial: Lesscss.org
Descargar: Less

SHARE :

Acerca de - @jdiazhn

Desarrollador Web / IT / Telecom, viviendo actualmente en isla de Roatan en el atlántico de Honduras. Amante del buen fútbol, asados y temas relacionados con Tecnologías de la Información (IT).