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 :
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.
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.
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
Connect
Trackbacks/Pingbacks
[…] 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, […]