Définir dynamiquement une variable dans MOINS de CSS

Je suis en train de créer un mixin qui définit de manière dynamique des variables en MOINS de CSS, en leur assignant un nom composé.

Simplifié de cas d'utilisation (pas le vrai):

.define(@var){
    @foo{var}: 0;
}

Alors qu'on pourrait appeler le mixin en tant que tel:

.define('Bar'){
    @fooBar: 0;
}

Puisque ce genre de chaîne d'interpolation est possible en utilisant les sélecteurs de noms, je me demandais si ce serait la même possible pour les noms de variables; jusqu'à présent, je n'ai pas eu de chance avec les différentes syntaxes j'ai essayé (autres que ceux ci-dessus, j'ai essayé de s'échapper, citant, à l'aide de la ~ préfixe et ainsi de suite).

Modifier

J'ai juste essayé une chose de plus, et je sens que je pourrais être proche; mais je suis en train de vivre une bizarrerie de la MOINS de de la syntaxe. Si j'écris ceci:

.define(@var){
    #namespace {
         @foo: @var;
    }
}

Et ensuite l'appeler de la sorte:

.define(0)

Je peux alors utiliser @foo dans l'habitude des espaces de de la mode:

.test {
     #namespace;
     property: @foo; /* returns 0 */
}

Cependant, la même chose ne s'applique pas dans le cas d'une chaîne-interpolées sélecteur:

.define(@var, @ns){
    #@{ns} {
         @foo: @var;
    }
}

.define(0, namespace);

.test {
     #namespace;
     property: @foo;
}

Le code ci-dessus me donne l'erreur suivante:

Erreur de nom: #espace de noms n'est pas défini

Cependant, la chaîne d'interpolation a été un succès et valide. Comme une question de fait, si je retire le .test partie et modifier le ci-dessus à la sortie d'une propriété de test, je peux voir que le CSS est analysée correctement. Je veux dire:

.define(@var, @ns){
    #@{ns} {
         @foo: @var;
         prop: @foo;
    }
}

.define(0, namespace);

Sorties le code CSS suivant:

#namespace {
    prop: 0;
}

OriginalL'auteur Sunyatasattva | 2013-08-04

12

Cela Ne Peut Être Fait

Ce que vous désirez n'est actuellement pas possible à MOINS. Je ne peux penser à deux "solutions" si vous savez à l'avance ce que les noms de variables que vous souhaitez autoriser à être utilisé (en d'autres termes, pas entièrement dynamique). Puis quelque chose comme l'une des suivantes qui pourrait être fait:

Idée #1 (Les Variables)
```
.define(@var) {
  @fooBar: 0;
  @fooTwo: 2;
  @fooYep: 4;

  @fooSet: 'foo@{var}';
}

.define(Two);
.test {
  .define(Bar);
  prop: @@fooSet;
}
.test2 {
  prop: @@fooSet;
}
```
Idée #2 (Paramétrique Mixin)

MOINS
```
.define(@var) {
  .foo() when (@var = Bar) {
    @fooBar: 0;
  }
 .foo() when (@var = Two) {
    @fooTwo: 2;
  }
 .foo() when (@var = Yep) {
    @fooYep: 4;
  }
  .foo();
}

.define(Two);
.test {
  .define(Bar);
  prop: @fooBar;
}
.test2 {
  prop: @fooTwo;
}
```
CSS de Sortie (pour les deux idées)
```
.test {
  prop: 0;
}
.test2 {
  prop: 2;
}
```
Conclusion

Mais je ne suis pas sûr de l'utilité soit serait vraiment, je ne sais si elle pourrait avoir une application réelle dans votre cas d'utilisation (puisque vous mentionnez ci-dessus n'est pas le réel de cas d'utilisation). Si vous voulez une dynamique variable en MOINS, alors il ne peut être fait grâce à MOINS de lui-même.

Merci beaucoup pour votre réponse, malheureusement, aucune de vos idées pourraient m'aider à résoudre mon cas réel, bien que d'aller pour paramétrique mixin permettra de réduire certains de mon code en bas. J'ai essayé une autre solution, bien que, vous pouvez consulter la modifier: des idées à ce sujet?
Votre modifier avec l'espace de noms idée souffre du fait qu'à l'heure actuelle, MOINS de ne pas prendre en charge les classes générées dynamiquement comme mixin. Un espace de noms est en fait un mixin.
Je suis aussi de ne pas voir ce que l'avantage de la namespacing vous donne, lorsque vous pouvez simplement appeler .define(0); à l'intérieur d'un bloc de code, vous avez mis le #namespace. Les deux vous permettent d'utiliser le @foo variable à ce point. Vous pouvez avoir besoin de décrire plus précisément ce que vous êtes réellement en train de faire et pourquoi vous êtes en train de le faire.
Merci pour le lien de la question. En effet, vous êtes de droite, à l'aide de l'espace de noms viens de me sauver un peu de code; au début quand j'ai essayé cette approche, j'espère que je pourrais appeler prop: #namespace > @fooBar mais en effet ce n'est pas le cas. Merci pour votre aide.
Fantastique de réponse... Besoin d'un moment pour obtenir ma tête autour de cela, mais vaut bien le temps! Merci

OriginalL'auteur ScottS
2

Je ne suis pas vraiment sûr de ce que vous voulez l'utiliser, mais l'un de mes suggestion est fondée sur @ScottS réponse. Sur mon monde, j'ai besoin de créer une application web, où il serait de montrer plusieurs marques et chaque marque ont leur propre couleur du texte, le fond, et ainsi de suite... j'ai donc commencé à chasser un moyen d'accomplir cela en MOINS, ce que j'ai pu facilement le faire sur SASS et le résultat est ci-dessous:

MOINS
```
//Code from Seven Phase Max
//............................................................
//.for
.for(@i, @n) {.-each(@i)}
.for(@n)     when (isnumber(@n)) {.for(1, @n)}
.for(@i, @n) when not (@i = @n)  {
.for((@i + (@n - @i) / abs(@n - @i)), @n);
}
//............................................................
//.for-each
.for(@array)   when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
.for-impl_(@i)                  {.-each(extract(@array, @i))}
//Brands
@dodge : "dodge";
@ford : "ford";
@chev : "chev";
//Colors
@dodge-color : "#fff";
@ford-color : "#000";
@chev-color : "#ff0";
//Setting variables and escaping than
@brands: ~"dodge" ~"ford" ~"chev";
//Define our variable   
.define(@var) {
@brand-color: '@{var}-color';
}
//Starting the mixin
.color() {
//Generating the loop to each brand
.for(@brands); .-each(@name) {
//After loop happens, it checks what brand is being called
.define(@name);
//When the brand is found, match the selector and color
.brand-@{name} & {
color: @@brand-color;
}
}
}
.carColor {
.color();
}
```
Te le résultat sera:

CSS
```
.brand-dodge .carColor {
color: "#fff";
}
.brand-ford .carColor {
color: "#000";
}
.brand-chev .carColor {
color: "#ff0";
}
```
C'est très difficile et j'ai dû utiliser plusieurs éléments afin d'obtenir ce dont j'avais besoin, d'abord utilisé un ensemble de mixin fournis par Sept Phase de Max et vous pouvez le trouver ici et que, le @ScottS réponse a été la pièce qui manquait bof mon puzzle... espérons que cela vous aide, vous et d'autres qui ont besoin de créer un ensemble de Variables pour faire partie d'une autre variable et de créer une dynamique moins fichier.

Vous pouvez copier la totalité de mon code et test à http://lesstester.com/

Merci pour le commentaire. Je vais jeter un oeil à votre code. Ma question est de presque un an et je ne me souviens pas exactement ce que je cherchais (je doit avoir accompli d'une manière différente). Je vais étudier un peu ce que vous avez posté et aussi de creuser dans mon ancien code pour voir si elle correspond.
Juste au cas où, ma seule question est avez-vous vraiment besoin de ces variables? (les variables sont ce qui rend tout cela si compliqué). Personnellement, je n'arrive pas à voir le besoin pour des choses comme @dodge-color là (c'est à dire l'écriture dodge dans un endroit juste pour vous rendre à écrire dodge dans les autres?). Pour moi, il ressemble à ce genre de choses est parfaitement soluble avec quelque chose comme ceci ou ceci (+ toutes les combinaisons de ces méthodes).
Je comprends votre point ici, mais il ya des cas que nous avons vraiment besoin de générer des classes dynamiques... Mon exemple était très simple, et dans ce cas n'a pas vraiment de sens, mais sur ma monde réel, la variable a été nécessaire, parce que nous voulions seulement l'ensemble des variables et laisse MOINS faire le reste. Une autre chose à noter, dans notre cas, le CMS a été paramètre de la marque classes à la balise body et chaque page de leur propre couleur de police, arrière-plan de l'image et etc...
Je ne vois toujours pas pourquoi @colors: dodge #fff, ford #000; ou similaire ne peut pas être utilisé à la place de @dodge-color: #fff; @color-ford: #000;. Prendre aucun d'autres de programmation: langage de patrons de conception: quand nous avons besoin de reproductibles choses nous définissons ces données via des tableaux de structures (ou de structures de tableaux, etc.), nous n'avons pas déclarer chaque valeur unique que nous avons besoin d'une variable globale avec un nom unique (encore une fois, pour quoi faire?). OK, jamais l'esprit (c'est semble aller futiles, déjà), je voulais juste mentionner que, pour moi, toute cette idée ressemble fondamentalement mauvaise approche.

OriginalL'auteur Paulo Griiettner
1

Suivi de la accepté de réponse, vous pouvez également définir une valeur pour la variable par l'extension de l' .define() mixin comme suit. Cela vous permet d'utiliser un ensemble temporaire de variables au sein d'une règle.
```
.define(@var, @val) {
.foo() when (@var = temp1) {
@temp1: @val;
}
.foo() when (@var = temp2) {
@temp2: @val;
}
.foo() when (@var = temp3) {
@temp3: @val;
}
.foo();
}
.define(temp2, 2);
.test {
.define(temp1, 0);
prop: @temp1;
}
.test2 {
prop: @temp2;
}
```
CSS Sortie
```
.test {
prop: 0;
}
.test2 {
prop: 2;
}
```
Ici est plus compliqué résumé de la façon dont j'utilise cette dans un mixin pour générer responsive images d'arrière-plan avec background-size: cover; (et un IE8 secours).

OriginalL'auteur Tg7z
1

Je n'ai pas le temps de construire des exemples, mais aucun des ci-dessus sont aussi rapide et simple que la définition d'une variable et l'assemblage de l'importation. Puis il suffit d'avoir plusieurs documents où les mêmes variables sont définies.
```
@whitelabel: 'foo';
@import 'whitelabel/@{whitelabel}/colors';
```
OriginalL'auteur Kirk Strobeck

Vous devez vous connecter pour publier un commentaire.

Modifier

Cela Ne Peut Être Fait

Idée #1 (Les Variables)

Idée #2 (Paramétrique Mixin)

CSS de Sortie (pour les deux idées)

Conclusion

MOINS

CSS

CSS Sortie