mac - Nombres de variables dinámicas en LESS CSS

less tutorial

Question

He intentado esto por un tiempo, buscando otras respuestas, pero sin éxito. Esperemos que alguien me pueda ayudar.

Estoy tratando de generar algunos nombres de variables dinámicas dentro de una mezcla.

Las variables ya están definidas:

@horizontal-default-color: #fff;
@horizontal-inverse-color: #000;

etc.

La mezcla que quiero sería algo como esto:

.horizontal-variant(@variant) {
    color: @{horizontal-@{@variant}-color}
}

Y el resultado que estoy esperando, cuando se llama:

.horizontal-default{
   .horizontal-variant(~"default");
}
.horizontal-inverse{
   .horizontal-variant(~"inverse");
}

es

.horizontal-default {color: #fff}
.horizontal-inverse {color: #000}

Desafortunadamente me encuentro con errores cada vez.

Sé que esto se puede hacer, he visto que se usa en Font Awesome LESS donde @{fa-css-prefix} se define en las variables. Solo tengo problemas para transportar la misma solución en mi proyecto.

Puedes probar a probar el código en http://lesstester.com/

Answer 1

Puedes usar nombres de variables . Y he probado el código en http://lesstester.com/ , funciona.

@horizontal-default-color: #fff;
@horizontal-inverse-color: #000;

.horizontal-variant(@variant) {
  @color: "horizontal-@{variant}-color";
  color: @@color;
}

.horizontal-default{
  .horizontal-variant(~"default");
}
.horizontal-inverse{
  .horizontal-variant(~"inverse");
}