Usando CSS Dinámico ( LESS)

Cuando CSS nació solo era una herramienta para modificar algunos estilos básicos en una página web. Con el tiempo los desarrolladores encontraron una potente herramienta en este lenguaje, optimizando su uso no solo para cambiar estilos sino para ser capaz de controlar toda la parte visual de una página web en cualquier dispositivo que nos encontremos.

Ahora han ido un paso más allá, creando herramientas de pre-procesado de CSS, que consiste en extenderlo para usar variables, reglas anidadas, mixins o funciones. Entre estas herramientas se encuentran LESS o SASS.

En este artículo vamos a hablar de LESS, ya que aunque las características de ambos son similares, la sintaxis de LESS es más parecida al CSS; además aunque ambos se escribieron en Ruby y necesitan instalarse en el servidor para ser procesados, los desarrolladores de LESS sacaron Less.js, que se ejecuta en el lado del navegador y que solo necesita incluir el enlace al código LESS.

¿Como empezar?

Para poder usar esta herramienta debemos enlazar el fichero con extensión .less y poniendo el atributo rel como stylesheet/less:

<link rel='stylesheet/less' type='text/css' href='styles.less' />

Debemos incluir el script descargado less.js:

<script src='less.js' type='text/javascript'></script>

Nota: El fichero .less debe estar incluido siempre antes que el script.

Variables

Permite crear una única definición de un valor, y poder aplicarlo en cualquier regla del documento. Una variable se define con el símbolo @.

@color-web: #f6f1dd;
#header {background-color: @color-web;}
#footer {background-color: @color-web;}

El resultado en CSS será:

#header {background-color: #f6f1dd;}
#footer {background-color: #f6f1dd;}

MIXINS

Es habitual repetir las mismas propiedades varias veces a lo largo del documento, veamos cómo simplificarlo.

#main-menu li {border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}
#other-rule li {border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;}

Reglas Anidadas

Para trabajar con la herencia simplemente iremos anidando los selectores unos dentro de otros, lo que facilitará su lectura

#header {
	h1 {font-size: 26px; font-weight: bold;}
	p {font-size: 12px;
		a {text-decoration: none;
			&:hover {border-width: 1px;}
		}
	}
}

El resultado en CSS será:

#header h1 {font-size: 26px; font-weight: bold;} #header p {font-size: 12px;} #header p a {text-decoration: none;} #header p a:hover {border-width: 1px;}

El símbolo & se usa para concatenar un selector con su padre. Muy útil para casos como el :hover y :focus.

Funciones

A través de las funciones podemos modificar dinámicamente el valor de una propiedad.

@border: #2px;
@color-web: #012;
#header {border: @border solid @color;}
#footer {border: @border * 2 solid @color * 3;}

El resultado en CSS será:

#header {border: 2px solid #012;}
#footer {border: 4px solid #036;}

Conclusiones

El hecho de que esta herramienta esté basada en el uso de javascript impide su funcionamiento para los navegadores que no lo utilicen. Para estos casos el CSS no sería visible creando un problema en la web. También puede haber programadores que no deseen sobrecargar la web con otro script que provoque que la web cargue más lento.

Con la llegada de HTML5 los navegadores guardarán este CSS generado en el caché, por lo tanto este tiempo de carga se verá minimizado a una sola ocasión. Otra solución es utilizar programas como Less.app o WinLess, que compilan el código CSS e incluirlo después en tu web.

Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.