In LESS CSS, is it possible to use a namespaced variable in a call to another mixin?

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%的效用.

Sco*_*ttS 7

新答案:使用Guard Expression Check扩展您的Mixin

据我了解,您希望命名空间能够用作默认值,但是根本不能进入全局范围.我认为你需要扩展你的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本身

如果将变量捆绑到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)