Less: Variables y Mixins

Como hemos mencionado en el post anterior Less tiene varias funcionalidades que son las encargadas de brindarnos varias ventajas en cuanto a la reutilizacion del código escrito. En este post en particular trataremos el tema del uso de variables y mixins dentro del código con el fin de reducir la cantidad de lineas que tenemos que escribir.

Variables

Es común ver en varios lugares de nuestras hojas de estilo (CSS) repetidos ciertos valores como los colores, el alto o el ancho entre otros y cuando debemos realizar una modificación deberemos buscar y reemplazar en cada uno de los lugares ese valor. La idea de las variables es tener en un lugar centralizado ciertos valores que sabemos que van a ser reutilizados en varios lugares.

LESS CSS
@link-color: #428bca;

a {

color: @link-color;

}

a {

color: #428bca;

}

Alcance (scope)

Algo a tener en cuenta cuando se usan variables dentro de lo que es Less es el scope (alcance) de las mismas, puntualmente se debe tener en cuenta dos cosas:

  • Al crear una variable dentro de una clase, la misma es solo visible dentro de la misma y no en otras dentro del archivo
LESS CSS
@link-color: #428bca;

a {

@color-white: #ffffff;

color: @color-white;

}

footer {

color: @link-color;

}

a {

color: #ffffff;

}

footer {

color: #428bca;

}

  • Al modificar el valor de una variable dentro de una clase afecta al resto de las clases que usen esa clase ya que tendrán el nuevo valor y no el original.
LESS CSS
@link-color: #428bca;

a {

@link-color: #ffffff;

color: @link-color;

}

footer {

color: @link-color;

}

a {

color: #ffffff;

}

footer {

color: #428bca;

}

Interpolacion de variables

La interpolacion hace referencia a la utilización de variables para cambiar dinamicamente parte del nombre de un atributo, selector o propiedad (border-@{$variable}), para poder modificar de forma facil y sencilla el comportamiento de un estilo.

LESS CSS
@mySelector: widget;

.@{mySelector} {

font-weight: bold;

padding-left: 10px;

}

.widget {

font-weight: bold;

padding-left: 10px;

}

Mixins

Los mixins son bloques reutilizables de código los cuales pueden ser invocados en otros estilos como si fueran una propiedad mas. Ademas se les puede pasar argumentos para modificar parte de su contenido y hacerlos mas dinámicos.

Algunas cosas que se podrían hacer con un mixin son:

  • Definir un estilo y reutilizarlo por toda la hoja de estilos
  • Combinar múltiples clases para crear una nueva
  • Crear clases que puedan recibir parámetros para cambiarle el comportamiento (aquí también se puede hacer uso de la interpolacion).

Veamos un ejemplo de como crear y usar un mixin junto con variables:

LESS CSS
@link-color: #428bca;

.color-default {

color: @link-color;

}

.mixin {

color-default ();

}

.color-default  {

color: #428bca;

}

.mixin {

color: #428bca;

}

Como se ve en el ejemplo anterior el mixin definido (color-default) tambien es parte del CSS que se genera lo cual puede ser un inconveniente porque nuestra idea era tan solo tenerlo como un bloque reutilizable, para solucionar este problema basta con agregarle los paréntesis al mixin .color-default () por lo cual LESS interpretara que no es una clase sino tan solo un bloque de código para reutilizar.

Interpolacion de mixins

Los mixins podían quedar excluidos del uso de la interpolacion, la misma puede ser por medio de variables definidas o por el pasaje de argumentos, incluso se podria definir el nombre de un mixin por medio de esto. Veamos esto en un ejemplo:

LESS CSS
@attribute: color;

.color-default() {

@attribute:#428bca;

}

.mixin {

color-default ();

}

.mixin {

color: #428bca;

}

Mixins parametricos

Los mixins parametricos son aquellos que reciben uno o mas parámetros pudiendo tener valores por default en caso de que no sean informados por la clase que los invoca.

Veamos un ejemplo de un mixin sin valores por default:

LESS CSS
boton(@radius) {

border-radius: @radius;

}

.mixin {

boton (4px);

}

.mixin {

border-radius: 4px;

}

Ahora si al mixin boton no lo pasamos ningún parámetro nos arrojara un error por eso se podría decir que es una buena practica colocarle un valor por default, lo cual en caso de que se invoque al mixin sin ningún parámetro le asignara ese valor por default. Modifiquemos el ejemplo anterior para ver como quedaria

LESS CSS
boton(@radius: 4px, @color: #428bca) {

border-radius: @radius;

color: @color;

}

.mixin {

boton ();

}

.mixin {

border-radius: 4px;

color: #428bca;

}

El uso de parámetros es algo sencillo pero que pasa si en un mixin tenemos muchos y no recordamos el orden exacto de los mismos, si nos equivocamos estaremos dándole un valor incorrecto al estilo que se genera. Para resolver este problema es que cuando invocamos a un mixin podemos colocarle el nombre del parámetro al que hacemos referencia para asi evitar tenerlos que colocar en el orden correcto o simplemente por que no queremos informar todos los parámetros.

LESS CSS
boton(@radius: 4px, @color: #428bca) {

border-radius: @radius;

color: @color;

}

.mixin {

boton (@radius: 15px);

}

.mixin {

border-radius: 15px;

color: #428bca;

}

Mixins condicionales

Los mixins condicionales son aquellos que validan una condición y en función de eso agregan o no las propiedades al estilo que la invoca, para ello utilizan la palabra reservada when (seria el equivalente a usar if en algunos lenguajes de programación).

LESS CSS
boton(@radius) when  (@radius > 5) {

border-radius: @radius px;

}

.mixin {

color: #428bca;

boton (4);

}

.mixin {

color: #428bca;

}

Existen varias funciones definidas para hacer comprobaciones basicas:

  • iscolor
  • isnumber
  • isstring
  • isurl
  • iskeyword

Conclusión

Hemos visto a lo largo del post que tanto las variables como los mixins presentan múltiples variantes las cuales nos ayudan a crear una hoja de estilos mas fácil de poder entender y modificar, estas ventajas son algunas de todas las que existen si desean saber mas al respecto pueden revisar este link que hace referencia a la documentación oficial.

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *