In LESS CSS, is it possible to use a namespaced variable in a call to another mixin or as a default value in another mixin? Using the normal syntax, it appears not, but is there an escape sequence or other syntax I can use to achieve the effect I'm looking for?
I'm thinking of code like this:
#namespace {
@nsColor: #333;
}
.testMixin1(@mixinColor) {
background-color: @mixinColor;
}
.selector { .testMixin1(#namespace > @nsColor); }
Or alternatively...
.testMixin2(@anotherMixinColor: #myNamespace > @myColor) {
background-color: @anotherMixinColor;
}
If not, this severely limits the utility of namespaces. It's like being able to place a variable in object scope but only being able to pass variables in the global scope as a parameter to a function. Basically this would appear to eliminate 90% of the utility of namespaces.
As we know, less function can't work with css variables.
Defining a variable: Variables in Less are represented with an at (@) sign. We can assign a value using a colon (:).
LESS and CSS syntax The second difference between LESS and CSS lies in the syntax. However, the LESS syntax is little different from the CSS one, as the stylesheet language is a CSS preprocessor. This means that any CSS code is a valid LESS code (but additional LESS elements won't work in a plain CSS).
So as I understand it, you want the namespace to be able to be used as a default value, but without it entering into the global scope at all. I think you need to expand your mixin definition like so:
#namespace {
@nsColor: #333;
}
.testMixin1(@mixinColor: 'null') {
.mixin (@a) when (iscolor(@a)) {
background-color: @a;
}
.mixin (@a) when not (iscolor(@a)) {
#namespace;
background-color: @nsColor;
}
.mixin (@mixinColor);
}
Then call without or with a value:
.testMixin1();
.testMixin1(red);
Outputs (based on whether you set value or not):
background-color: #333333;
background-color: #ff0000;
OR
You can still use a "getter" mixin in your namespace as I originally noted, like so:
#namespace {
.getNsColor(){@nsColor: #333;} <-- changed here
}
.testMixin1(@mixinColor: 'null') {
.mixin (@a) when (iscolor(@a)) {
background-color: @a;
}
.mixin (@a) when not (iscolor(@a)) {
#namespace > .getNsColor(); <-- changed here
background-color: @nsColor;
}
.mixin (@mixinColor);
}
If you bundle the variable into a mixin itself, then you can access it. So...
#namespace {
.getNsColor() {@nsColor: #333;}
}
.testMixin1(@mixinColor) {
background-color: @mixinColor;
}
Then either include it...
One: Globally
#namespace > .getNsColor;
.selector {
.testMixin1(@nsColor);
}
or Two: Locally
.selector {
#namespace > .getNsColor;
.testMixin1(@nsColor);
}
Both of which will output...
.selector {
background-color: #333333;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With