[LESS CSS] Problème de variables et de concaténation

Bonjour!

J'ai récemment essayé d'écrire un code en LESS CSS, une alternative à CSS incluant des variables un peu à la manière de PHP ou de Javascript.

Voici mon code:
@winterColor: #445472; //Il y a aussi les variables @summerColor, etc...
@theme: winter; //Ici, je choisis le thème hiver, il y a aussi été, etc...
@color: "@" + @theme + "Color"; //C'est la ligne que j'ai du mal à écrire.

div {
background-color: @color;
}

P.S.: J'ai réduit le code au minimum utile pour comprendre le problème.

Merci de m'aider! D:
Modifié par Kruxxy (23 Nov 2016 - 19:09)

Bonsoir,

Si vous regardez votre code de plus près vous vous apercevrez que la variable @color n'est pas définie.

Edit : Oui c'est mieux sans "@colorA"...
Modifié par Olivier C (24 Nov 2016 - 07:02)

Olivier C a écrit :
Bonsoir,

Si vous regardez votre code de plus près vous vous apercevrez que la variable @color n'est pas définie.

Je viens de modifier, un petit A qui traînait quand j'ai modifié l'exemple pour le rendre plus compréhensible. Avez-vous une solution sinon?

Hello,

Il faut échapper certaines variables et la chaîne :

@winterColor: #445472;
@theme: winter;
@color: ~"@{theme}Color";

div {
  background-color: @@color;
}

Bonne soirée
Modifié par Felipe (24 Nov 2016 - 09:50)

Bonjour,

les 2 points de la documentation sont :
Variable interpolation
et
Escaping (tellement mal nommé AMHA que même en sachant ce que je cherchais je ne voyais pas quelle entrée de menu pouvait correspondre m'enfin après avoir oublié une paire de fois d'échapper un calc(), on oublie plus de bien ajouter le tilde et les guillemets quand on fait du LESS )
Modifié par Felipe (24 Nov 2016 - 09:54)

Raphael a écrit :

@color: ~"@{theme}Color";

div {
  background-color: @@color;
}

Merci beaucoup!! Pour ne pas avoir à écrire @@color à la place de @color comme dans ton exemple, j'ai écrit:

@colorX: ~"@{theme}Color";
@color: @@colorX;

... et ça fonctionne!
Merci encore et bonne continuation à vous en programmation!