LessCss/Sass - Zugang zu inneren Variablen?

Question

Kann auf eine innere Variable zugegriffen werden?

Gegeben:

.method() { 
     @variable:100: 
    } 

.class { 
     z-index:.method.@variable; 
} 

Ist das irgendwie möglich?

Answer 1

Nicht in der genau wie Sie denken, aber Sie können dieses Ergebnis erzielen. Abhängig von Ihren Stilen müssen Sie möglicherweise die Einstellungen an dieses Modell anpassen. (LESS hat eine große Aufgabe auf Referenzen unabhängig von der Reihenfolge der Lösung Dinge in einer Datei erscheinen, aber Abhängigkeiten über die Dinge setzen, die sie rufen eine hilfreiche Organisation Gewohnheit.)

.class(@x) { 
    z-index: @x; 
} 
.method() { 
    @variable: 100; 
    .class(@variable); 
} 

---

Beachten Sie, dass, wenn Sie don 't müssen @variable irgendwo sonst innerhalb .method() verwenden Sie können die Deklaration überspringen. Das heißt, eine Variable deklarieren, wenn Sie so etwas wie

.method() { 
    @variable: 100; 
    .class(@variable); 
    padding-right: unit(@variable,px); 
} 

tun wollen, und wenn Sie brauchen nicht auf die Variable speichern Sie sich diese Zeile:

.method() { 
    .class(100); 
    color: red; 
} 

---

Edit:

1. Wenn Sie in der Lage sein möchten, einen Wert an .method zu übergeben, lassen Sie das Mixin ein Argument rathe r als die Variable innerhalb des Mixins zu definieren. Damit können Sie sowohl .example {method(100)} als auch .example{method(200)} ausführen.

.class(@x) { 
    z-index: @x; 
} 
.method(@x) { 
    .class(@x); 
} 

2. Wenn .class muss in der Lage sein, ohne zu arbeiten, um ein Argument übergeben wird, können Sie es mit einem Standardwert bieten können. Angesichts

.class(@x:100) { 
    z-index: @x 
} 

.example{.class} wird auf die gleiche Sache wie .example{.class(100)} würde kompilieren.

Answer 2

Ich bin nicht sicher, ob ich recht verstehe Ihre Frage, aber ich habe eine Lösung, ich hoffe, dass Sie es nützlich finden:

In Abzüglich:

.method(){ 
    @variable:100; 
} 

.method2(){ 
    @variable:200; 
} 

.class { 
    .method(); 
    z-index:@variable; 
} 

.class2 { 
    .method2(); 
    z-index:@variable; 
} 

In SASS

@function method() { 
    $variable: 100; 
    @return $variable; 
} 
@function method2() { 
    $variable: 200; 
    @return $variable; 
} 

.class { 
    z-index: method(); 
} 

.class2 { 
    z-index: method2(); 
} 

CSS-Ausgang für SASS/LESS:

.class { 
    z-index: 100; 
} 

.class2 { 
    z-index: 200; 
}