Estilos dinámicos con Less CSS

Less es un lenguaje de hojas de estilo dinámico, que se puede ejecutar en el lado del cliente con Javascript o en el lado del servidor con Node.js. Además es totalmente multiplataforma y de código abierto.

Less añade todo lo que alguna vez hemos echado en falta con CSS. Cosas como variables, operaciones y mixins.

Cómo usar Less

En el lado del cliente

Primero descargamos el archivo less.js desde la web oficial de less
Luego creamos una hoja de estilos Less, por ejemplo style.less y la añadimos al header de nuestro HTML de la siguiente manera:

Código :

<link rel="stylesheet/less" href="less/style.less" /> 

Por último hacemos referencia a less.js que descargamos anteriormente

Código :

<script type="text/javascript" src="js/less-1.2.0.min.js"></script>

[nota:e957cacdf1]Es muy importante que la hoja de estilos se añada antes que el script. [/nota:e957cacdf1]

En el lado del servidor

Para compilar los archivos Less tenemos varias opciones:
Para Windows, mac y Linux se puede usar simpLESS o si prefieren la línea de comandos, pueden instalar Less vía npm.

Conociendo el poder de Less

Vamos a ver la gran variedad de funcionalidades que nos ofrece Less.

Comentarios

Podemos usar los comentarios normales de CSS y estos serán visibles en el código resultante:

Código :

/* Comentario visible en el css resultante */

Pero también podemos usar comentarios que solo son visibles en el archivo Less:

Código :

//Comentario no visible en el css resultante

Variables

Las variables en Less funcionan exactamente igual que en cualquier lenguaje de programación y se usan de la siguiente manera:

Código :

@link-color: #F34F25;

@h-color: #20496C;

a {

   color: @link-color;

}

h1, h2 {

   color: ...

Continua leyendo desde la fuente


Related posts:
Crea estilos CSS en Adobe Dreamweaver CS5 La base del diseño en web es el uso de...
Menú básico con CSS Maquetación de menú básico usando una lista vertical. Maquetar una...
Texto sombreado y en 3D con CSS 3 y HTML5 Si has intentado crear texto en 3D utilizando CSS3 y...
No a los CSS Reset Los Reset CSS han estado pululando por la web desde...
Condicionales en CSS En HTML y CSS existen varios condicionales que nos permiten...

Related posts brought to you by Yet Another Related Posts Plugin.
 


			
						

Este articulo no pertenece a Shft.Info 
 indexamos los artículos que se encuentran en otros sitios y los organizamos en este directorio de articulos.