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.
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, […]