Dynamisch definieren Sie eine variable in CSS WENIGER

Ich versuche zum erstellen eines Mixins, die dynamisch definiert Variablen, die in WENIGER CSS, tatsächlich die Zuordnung zu einer zusammengesetzten Namen.

Vereinfachtes use-case (nicht das echte):

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

Dann würde man rufen Mixins als solche:

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

Da diese Art der string-interpolation ist möglich, während mit Selektoren-Namen, ich Frage mich, ob das dasselbe wäre möglich für Variablennamen; bisher hatte ich kein Glück mit verschiedenen Schreibweisen, die ich ausprobiert (andere als die oben genannten, ich habe versucht, zu entkommen, zu zitieren, mit der ~ Präfix und so weiter).

Bearbeiten

Habe ich gerade versucht, eine weitere Sache, und ich fühle, könnte ich schließen; aber ich bin mit einer kuriosität, der WENIGER syntax. Wenn ich dies Schreibe:

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

Und dann rufen Sie es so auf:

.define(0)

Kann ich dann verwenden @foo im üblichen haben Mode:

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

Aber das gleiche gilt nicht im Falle einer string-Interpolation-Auswahl:

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

.define(0, namespace);

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

Den obigen code gibt mir die folgende Fehlermeldung:

Name-Fehler: #namespace nicht definiert ist

Jedoch die string-interpolation war erfolgreich und gültig. Als eine Angelegenheit von Tatsache, wenn ich nehmen die .test Teil, und ändern Sie die oben, um die Ausgabe eines test-Eigenschaft, ich kann sehen, dass die CSS korrekt analysiert. Ich meine:

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

.define(0, namespace);

Ausgänge die folgende CSS:

#namespace {
    prop: 0;
}

InformationsquelleAutor Sunyatasattva | 2013-08-04

12

Dies Nicht Geschehen Kann,

Was Sie Lust zu tun, ist derzeit nicht möglich, in WENIGER. Ich denke, der kann zwei mögliche "workarounds" , wenn Sie frühzeitig wissen, welche Variablen-Namen, die Sie möchten, um zu ermöglichen, verwendet werden (in anderen Worten, nicht vollständig dynamisch). Dann so etwas wie eine der folgenden getan werden könnte:

Idee #1 (Variable Variablen)
```
.define(@var) {
  @fooBar: 0;
  @fooTwo: 2;
  @fooYep: 4;

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

.define(Two);
.test {
  .define(Bar);
  prop: @@fooSet;
}
.test2 {
  prop: @@fooSet;
}
```
Idee #2 (Parametric Mixins In Verbindung)

WENIGER
```
.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-Ausgabe (für Ideen)
```
.test {
  prop: 0;
}
.test2 {
  prop: 2;
}
```
Abschluss

Aber ich bin mir nicht sicher, wie nützlich die beiden würden wirklich sein, noch weiß ich, ob es hätte jeder realen Anwendung in Ihrem konkreten Anwendungsfall (da Sie erwähnen, die oben ist nicht die realen Anwendungsfall). Wenn Sie möchten, eine voll dynamische variable in WENIGER, dann kann es nicht getan werden, durch WENIGER selbst.
- Vielen Dank für deine Antwort; leider ist keine der beiden Ideen würde mir helfen, meine Reale Welt Fall, wenn Sie für parametrische Mixins in Verbindung abgeschnitten werden einige meinen code unten. Ich versuchte eine andere Lösung, obwohl, können Sie die Bearbeiten: irgendwelche Gedanken auf, dass?
- Deine Bearbeitung mit dem namespace Idee leidet unter der Tatsache, dass WENIGER unterstützt nicht die Verwendung von dynamisch generierten Klassen als Mixins in Verbindung. Ein namespace ist im Grunde ein mixin.
- Ich bin auch nicht sehen, welchen Vorteil die Verwendung von Namensräumen gibt Sie, wenn Sie könnten, rufen Sie einfach .define(0); in einem block von code, den Sie genommen haben #namespace. Beide ermöglichen die Verwendung der @foo variable an diesem Punkt. Möglicherweise müssen Sie näher zu beschreiben, was Sie tatsächlich versuchen zu tun und warum Sie versuchen, es zu tun.
- Danke für den link zu dem Thema. In der Tat, Sie haben Recht, über den namespace wäre nur rette mich ein bisschen code, am Anfang, als ich versuchte, diesen Ansatz hatte ich gehofft ich könnte prop: #namespace > @fooBar aber in der Tat ist dies nicht der Fall. Vielen Dank für Ihre Hilfe.
- Fantastische Antwort... Brauchte einen moment, um meinen Kopf herum, diese aber lohnt sich die Zeit! Dank
InformationsquelleAutor ScottS
2

Ich bin mir nicht wirklich sicher, was Sie wollen zu verwenden, aber einer der meinen Vorschlag bezieht sich auf @ScottS Antwort. Auf meine realen Welt, ich brauche zum erstellen einer web-app, wo wäre es für mehrere Marken und jede Marke Ihren eigenen text, Farbe, hintergrund und so weiter... also fing ich an zu jagen einen Weg, dies zu erreichen in WENIGER, was könnte ich leicht tun, auf SASS und das Ergebnis unter:

WENIGER
```
//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 Ergebnis:

CSS
```
.brand-dodge .carColor {
    color: "#fff";
}
.brand-ford .carColor {
    color: "#000";
}
.brand-chev .carColor {
    color: "#ff0";
}
```
Dies ist sehr schwierig und ich hatte auch mehrere Elemente zu bekommen, was ich brauchte, zum ersten mal eine Reihe von Mixins in Verbindung zur Verfügung gestellt von Sieben Phase-Max und können Sie finden es hier und als die @ScottS Antwort wurde das Stück, das fehlte, war die her-mein puzzle... hoffe, das hilft Ihnen und anderen, die brauchen zu erstellen eine Reihe von Variablen, zum Teil von anderen Variablen und erstellen Sie ein dynamischeres, weniger Datei.

Können Sie kopieren meinen gesamten code und test bei http://lesstester.com/
- Danke für den Kommentar. Ich werde einen Blick auf Ihren code. Meine Frage ist fast ein Jahr alt und ich kann mich nicht erinnern, genau das, was ich versucht habe zu erreichen (muss ich erreicht haben, in einer anderen Art und Weise). Ich werde studieren ein bisschen was, die Sie geschrieben und Graben auch in meinem alten code, um zu sehen, ob es passt.
- Nur im Falle, meine Frage ist nur, braucht man wirklich diese Variablen gibt es? (die Variablen sind, was macht das so kompliziert ist). Ich persönlich sehe keine Notwendigkeit für Dinge wie @dodge-color es überhaupt (d.h. schreiben dodge an einem Ort einfach zu machen, selbst zu schreiben dodge andere?). Für mich sieht es aus wie diese Art von Zeug ist perfekt lösbar mit so etwas wie dieser oder dieser (+ beliebiger geeigneter Kombinationen dieser Methoden).
- Ich verstehe deinen Punkt hier, aber es gibt Fälle, die wir wirklich brauchen, zum generieren von Klassen dynamischer... Mein Beispiel war sehr einfach und in diesem Fall nicht wirklich Sinn machen, aber auf meiner realen Welt die variable war notwendig, denn wir wollten nur die set-Variablen und lassen WENIGER tun den rest. Eine andere Sache zu beachten, in unserem Fall das CMS wurde die Einstellung der Marke-Klassen für den body-tag und jede Seite hätte Ihre eigene schriftart, Farbe, hintergrund Bild und etc...
- Ich kann immer noch nicht sehen, warum @colors: dodge #fff, ford #000; oder ähnliches können nicht verwendet werden, anstelle von @dodge-color: #fff; @color-ford: #000;. Nehmen Sie beliebiger andere Programmiersprache design patterns: wenn wir brauchen, einige wiederholbare Sachen, die wir definieren, diese Daten über arrays von Strukturen (oder Strukturen von arrays usw.), wir deklarieren Sie nicht jeden einzelnen Wert, den wir brauchen, als eine Globale variable mit einem eindeutigen Namen (noch einmal, was für?). OK, never mind (es scheint offtopic geht schon), ich wollte nur erwähnen, dass für mich diese ganze Idee sieht aus wie grundlegend falsche Ansatz.
InformationsquelleAutor Paulo Griiettner
1

Folgen bis auf die akzeptierte Antwort, die Sie können auch definieren Sie einen Wert für die variable durch die Verlängerung der .define() mixin wie folgt. Dies ermöglicht die Verwendung einer temporären Variablen innerhalb einer Regel.
```
.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-Ausgabe
```
.test {
  prop: 0;
}
.test2 {
  prop: 2;
}
```
Hier ist ein komplizierter gist, wie ich diese in ein mixin für die Erzeugung von responsive Hintergrundbilder mit background-size: cover; (und ein IE8-fallback).

InformationsquelleAutor Tg7z
1

Ich habe keine Zeit zum erstellen der Beispiele, aber keines der oben genannten sind so schnell und einfach wie die Definition einer Variablen und dann die Montage der import basiert auf es. Dann einfach mehrere Dokumente, in denen die gleichen Variablen definiert sind.
```
@whitelabel: 'foo';
@import 'whitelabel/@{whitelabel}/colors';
```
InformationsquelleAutor Kirk Strobeck

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Bearbeiten

Dies Nicht Geschehen Kann,

Idee #1 (Variable Variablen)

Idee #2 (Parametric Mixins In Verbindung)

CSS-Ausgabe (für Ideen)

Abschluss

WENIGER

CSS

CSS-Ausgabe