Frameworks CSS (Less y Sass)

Todos los días hablamos sobre frameworks de Java ,NET etc y muchas veces nos olvidamos de que los diseñadores web son una parte fundamental en el éxito de nuestros proyectos . Ellos también tienen sus frameworks de desarrollo orientados a hojas de estilo construidos con Javascript. Supongamos que disponemos de la siguiente página web.


<html>
<body>
<p> hola que tal</p>
<ul>
<li>primer</li>
<li>segundo</li>
<li>tercero</li>
</ul>
</body>
</html>

Hemos usado una hoja de estilo para cambiar el color de los elementos a rojo :

estilos

 

El código es sencillo :


<style>
p {
color:red;
}
li {
color :red;
}
</style>

Sin embargo nos podemos dar cuenta que si queremos cambiar los dos elementos de color a por ejemplo azul ,tendremos que cambiar el color en dos sitios. ¿Que es LESS? Less es un framework de Javascript orientado a añadir flexibilidad y reducir el código que se tiene que escribir a nivel de las hojas de estilo. Una de sus capacidades mas utilizadas es la posibilidad de generar variables a nivel de hoja de estilo .Vamos a modificar nuestra CSS para que sea una hoja externa y contenga el siguiente código basado en LESS:

<style>
@colorRojo:red;
p {
color: @colorRojo;
}
li {
color: @colorRojo;
}
</style>

Podemos ver que el framework trabaja con variables y nos aporta flexibilidad a la hoja de estilo ya que la misma variable puede ser usada en n ubicaciones.

colorRojo

 

LESS Configuración

Existen varias formas de configurar LESS dentro de nuestro código en este ejemplo voy a usar una de las más sencillas y que están orientadas al entorno de desarrollo (No usar en producción) .Simplemente deberemos descargarnos el framework al cliente y añadirlo como un fichero CSS normal y corriente.

<link rel=“stylesheet/less” type=“text/css” href=“estilo.less”/>
<script src=“less-1.7.0.js” type=“text/javascript”
</script>

La competencia de LESS es Sass y ambos frameworks se reparten el mercado de frameworks de CSS compartiendo la mayor parte de los conceptos.

Post By Cecilio Álvarez Caules (32 Posts)

Oracle Certified Master, Java EE Enterprise Architect .Experto en la plataforma JEE y Trainer. Autor del libro Arquitectura Java Sólida Dueño del blog sobre JEE Arquitectura Java

Website: →

Connect

,

Trackbacks/Pingbacks

  1. Frameworks CSS Less y Sass para (CantabriaTic) - Arquitectura Java - 5 junio, 2014

    […] gente de CantabriaTIC en el cuál hago una breve introducción a los frameworks CSS y en concreto a Less ya que considero que son herramientas que pueden ayudar de forma clara a los diseñadores, […]

Deja un comentario

Leave your opinion here. Please be nice. Your Email address will be kept private.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
Translate »