css3

Estilos dinámicos con Less CSS

Una vez más, aquí dejo un pequeño tutorial debido al “éxito” relativo y al interés que ha suscitado ante alguna gente esto del LESS.  Estos pequeños apuntes que voy a colocar vienen dados debido a la curiosidad de como utilizar estilos dinámicos con LESS. Esto puede resultar muy útil para según que cosas a la hora de programar y dar estilo a una web.

Antes de empezar sería bueno recordar brevemente que 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, lo cual siempre viene bien.

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

Cómo usar Less para crear estilos dinámicos

En el lado del cliente

Primero descargamos el archivo less.js desde la web oficial de less. Cosa imprescindible. Después 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 :

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

Código :

Es muy importante que la hoja de estilos se añada antes que el script.

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.

Probando un poco esto de Less

Llegados a esta parte es hora de echar un vistazo a 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 :

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

Código :

 

Variables

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

Código :

En este ejemplo evitamos tener que estar repitiendo el código del color por toda la hoja de estilos y si quisiéramos cambiar de color, simplemente cambiamos el valor de la variable y no ir cambiando uno por uno en todos los lugares que se use.

Alcance de las variables

Como en cualquier otro lenguaje, en Less las variables también tienen alcance, por ejemplo:

Código :

Esto nos daría error, pues la variable está definida localmente dentro del elemento #link1.

Error LESS

Otro ejemplo:

Código :

¿Qué pasará aquí? #link1 usará el color naranja, mientras #link2 usará el color negro.

enlaces LESS

 

Operaciones

Con la ayuda de las operaciones podemos sumar, restar y multiplicar, teniendo una gran flexibilidad a la hora de manipular valores, por ejemplo:

Código :

 

Cuadrado LESS Texto

Pero las operaciones no son válidas sólo para los valores numéricos, también nos sirven para manipular colores, ejemplo:

Código :

 

Cuadrado LESS

 

Funciones de color

Less nos ofrece una gran variedad de funciones para manipular colores y su uso es muy sencillo: nombrefuncion(color, porcentaje):

Código :

Además podemos combinar el uso de estas funciones de manera sencilla:

Código :

 

Estilos dinámicos LESS

También podemos extraer información de los colores:

Código :

La lista completa de funciones: lighten, darken, saturate, desaturate, fadein, fadeout, fade, spin y mix.

Anidación

Cuando usamos CSS si queremos que un elemento que está dentro de otro tenga un estilo diferente al resto de la página lo haríamos de la siguiente manera:

Código :

Si utilizamos Less podemos lograr lo mismo de una forma más ordenada, intuitiva y fácil usando anidaciones:

Código :

 

Mixins

Esta es una de las cosas más interesantes de Less, con los mixins vamos a evitar estar repitiendo una y otra vez lo mismo por toda la hoja de estilos (que al menos a mi me suele ocurrir), con lo cual seremos mucho más productivos. Los mixins en Less son como las funciones en otros lenguajes de programación, si quisiéramos poner bordes redondeados a un div con solo CSS, lo haríamos de la siguiente manera:

Código :

¿Y si quisiéramos que otra clase también tuviera los border redondeados 5px?, sí, podríamos hacer una clase de bordes redondeados a 5px y agregar 2 clases al elemento, pero esto lo podemos lograr de una forma más limpia usando mixins de esta forma:

Código :

Nótese los paréntesis al final del nombre del mixin, si no hiciéramos esto el código se añadiría como una clase cualquiera. Pero ¿Qué hacemos si queremos que el valor de los bordes redondeados sea 3px y no 5px? ¿Hacemos otro mixin igual pero con 3px?. No, los mixins son hermosos y podemos pasarles parámetros:

Código :

Para usarlo solamente hacemos esto:

Código :

También podemos poner parámetros por defecto:

Código :

Un ejemplo un poco más complejo:

Código :

 

Botón LESS

Como podemos comprobar en este ejemplo, podemos crear mixins con múltiples parámetros y utilizar un mixin dentro de otro. También podemos usar todos los parámetros en una sola línea:

Código :

El resultado será:

Código :

 

Espacios de nombres

Los espacios de nombres en cualquier lenguaje de programación se usan para agrupar funcionalidades. En Less podemos hacer lo mismo con la ayuda de los mixins.

Código :

Se usan de la siguiente manera:

Código :

Esto es muy útil por ejemplo a la hora de desarrollar temas.

Importar

Se pueden importar otros archivos Less o CSS a nuestro archivo de trabajo actual y usar todos los mixins, variables, etc. que tengamos definidos en ellos. De esta forma podemos tener librerías reutilizables para todos nuestros proyectos.

Código :

La extensión .less es opcional.

Y bueno, con esto creo que se puede dar por concluido esta pequeña amalgama de apuntillos sobre como crear estilos dinámicos con LESS. La fuente de todo esto que he publicado viene de buscar “un poco” por internet.

Deja un comentario