Nat*_*zza 7 css namespaces mixins less
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); }
Run Code Online (Sandbox Code Playgroud)
Or alternatively...
.testMixin2(@anotherMixinColor: #myNamespace > @myColor) {
background-color: @anotherMixinColor;
}
Run Code Online (Sandbox Code Playgroud)
如果不是,这严重限制了名称空间的效用.这就像能够将变量放在对象范围中,但只能将全局范围中的变量作为参数传递给函数.基本上这似乎消除了命名空间的90%的效用.
据我了解,您希望命名空间能够用作默认值,但是根本不能进入全局范围.我认为你需要扩展你的mixin定义,如下所示:
#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);
}
Run Code Online (Sandbox Code Playgroud)
然后在没有或有值的情况下打电话:
.testMixin1();
.testMixin1(red);
Run Code Online (Sandbox Code Playgroud)
输出(根据您是否设置值):
background-color: #333333;
background-color: #ff0000;
Run Code Online (Sandbox Code Playgroud)
要么
您仍然可以像我最初提到的那样在命名空间中使用"getter"mixin,如下所示:
#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);
}
Run Code Online (Sandbox Code Playgroud)
如果将变量捆绑到mixin本身,则可以访问它.所以...
#namespace {
.getNsColor() {@nsColor: #333;}
}
.testMixin1(@mixinColor) {
background-color: @mixinColor;
}
Run Code Online (Sandbox Code Playgroud)
然后要么包括它......
一:全球
#namespace > .getNsColor;
.selector {
.testMixin1(@nsColor);
}
Run Code Online (Sandbox Code Playgroud)
或者两个:本地
.selector {
#namespace > .getNsColor;
.testMixin1(@nsColor);
}
Run Code Online (Sandbox Code Playgroud)
两者都会输出......
.selector {
background-color: #333333;
}
Run Code Online (Sandbox Code Playgroud)