LessCss/Sass - Access inner variables? - html

Question

Is it possible to access an inner variable ?
Given:
.method() {
#variable:100:
}
.class {
z-index:.method.#variable;
}
Is this possible somehow?

Answer 1

Not in the exact way you're thinking, but you can achieve that result. Depending on your styles you may need to adjust things to fit this model. (LESS does a great job at resolving references regardless of the order things appear in a file, but putting dependencies above the things that call them is a helpful organization habit.)
.class(#x) {
z-index: #x;
}
.method() {
#variable: 100;
.class(#variable);
}
Note that if you don't need to use #variable anywhere else inside .method() you can skip the declaration. That is, declare a variable if you want to do something like
.method() {
#variable: 100;
.class(#variable);
padding-right: unit(#variable,px);
}
and if you don't need the variable save yourself that line:
.method() {
.class(100);
color: red;
}
Edit:
If you want to be able to pass a value to .method, let the mixin take an argument rather than defining the variable within the mixin. With this you can do both .example {method(100)} and .example{method(200)}.
.class(#x) {
z-index: #x;
}
.method(#x) {
.class(#x);
}
If .class needs to be able to work without being passed an argument, you can provide it with a default value. Given
.class(#x:100) {
z-index: #x
}
.example{.class} will compile to the same thing as .example{.class(100)} would.

Answer 2

I'm not sure if I understand right your question but I have a solution, I hope that you find it useful:
In Less:
.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 output for SASS/LESS:
.class {
z-index: 100;
}
.class2 {
z-index: 200;
}