Berechnungen auf weniger variable Variablen

Question

Mein Gitter hat verschiedene Rinnen für verschiedene Haltepunkte und ich hätte gern meine .row Klassen dynamisch, indem es vordefinierte Variablen wie generieren:

@grid-gutter-xs: 10px; 
@grid-gutter-sm: 20px; 
... 

Dann habe ich einige Mixins, in dem eine, die die Reihe negative Ränder durch Dividieren der Rinne Größe in Halb erzeugt:

.grid-row(@class) { 
    .row { 
    margin-right: -(@{grid-gutter-@{class}}/2); 
    margin-left: -(@{grid-gutter-@{class}}/2); 
    } 
} 

die später genannt wird, wie

@media (min-width: @screen-sm-min) { 
    .grid-row(sm); 
} 

Dies ist ein Codeausschnitt und ich kann das einfach anders machen und den Kopfschmerzen entkommen, aber ich bin nur neugierig, ob es einfach nicht so funktioniert (und warum) oder mir etwas in der Syntax fehlt?

Answer 1

Die Idee, die Sie haben, ist richtig und es ist nichts falsch daran. Weniger Mixins können solche Fälle bewältigen. Aber die Umsetzung hat ein paar Probleme in der folgenden Codezeile:

margin-right: -(@{grid-gutter-@{class}}/2); 

• Zu allererst Sie den Wert @class Variable mit einer Variablen mit der Zeichenfolge grid-gutter und Syntax für die String-Verkettung werden verkettet ist "string-concatenated-with-@{var}" (Beachten Sie die Zitate). Dann sollte die Variable, deren Name der verketteten Zeichenfolge entspricht, ausgewertet werden.

• Aber selbst wenn wir das ganze Ding in Anführungszeichen wie "@{grid-gutter-@{class}}" setzen, wird die Mathematik wegen des in this answer beschriebenen Problems nicht funktionieren.

• Da die Mathematik nicht ausgeführt werden kann, wird die Ausgabe von "@{grid-gutter-@{class}}"/2 nur etwas wie 20px/2 (String-Verkettung) sein. Da die Ausgabe dieser ganzen Sache nur eine Zeichenfolge ist, wird die Negation -(...) ebenfalls fehlschlagen und einen Fehler erzeugen (die Fehlermeldung für diesen Schritt ist verwirrend, aber das ist ein anderes Problem).

  • Concatenate @{class} Variablenwert mit grid-gutter und speichern Sie in einer temporären Variablen: die folgenden wäre

  Der richtige Weg, dies zu tun.

• Verwenden Sie die temporäre Variable wie @@var (doppelt referenziert - @var ist der Wert der Temperaturvariable und der andere @ holt den Wert der Variablen, deren Name der ausgewerteten Zeichenfolge entspricht) in der Wertberechnung der Eigenschaft. Es ist erforderlich, da Less in solchen Fällen den Ausgabewert zu einer Zahl macht und dadurch die mathematischen Operationen unterstützt.
• Danach können Sie -(@@margin/2) oder -1 * @@margin/2 tun, um den negierten Wert zu erhalten. Es gibt keinen großen Vorteil dieser beiden Syntaxen und es ist eher eine persönliche Präferenz für die Verwendung.

Code:

@grid-gutter-xs: 10px; 
@grid-gutter-sm: 20px; 
.grid-row(@class) { 
    .row { 
    @margin: "grid-gutter-@{class}"; 
    margin-right: -1 * @@margin/2; /* or -(@@margin/2) */ 
    margin-left: -1 * @@margin/2; 
    } 
} 
@media (min-width: @screen-sm-min) { 
    .grid-row(sm); 
} 
@media (min-width: @screen-xs-min) { 
    .grid-row(xs); 
}