css - 在 LESS CSS 中，是否可以在调用另一个 mixin 时使用命名空间变量？

Question

在 LESS CSS 中，是否可以在调用另一个 mixin 时使用命名空间变量或将其用作另一个 mixin 中的默认值？使用普通语法，它似乎不是，但是否有转义序列或其他语法可以用来实现我正在寻找的效果？

我在想这样的代码:

#namespace {
    @nsColor: #333;
}

.testMixin1(@mixinColor) {
    background-color: @mixinColor;
}

.selector { .testMixin1(#namespace > @nsColor); } 

或者……

.testMixin2(@anotherMixinColor: #myNamespace > @myColor) {
    background-color: @anotherMixinColor;
}

否则，这将严重限制命名空间的实用性。这就像能够将变量放在对象范围内，但只能将全局范围内的变量作为参数传递给函数。基本上，这似乎消除了命名空间 90% 的效用。

Answer 1

新答案:使用 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);
}

然后在没有或有值的情况下调用:

.testMixin1();
.testMixin1(red);

输出(取决于您是否设置值):

background-color: #333333;
background-color: #ff0000;

或

您仍然可以像我最初指出的那样在您的命名空间中使用“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);
}

原始答案:将变量捆绑到混合本身

如果您将变量捆绑到 mixin 本身，那么您就可以访问它。所以……

#namespace {
    .getNsColor() {@nsColor: #333;}
}

.testMixin1(@mixinColor) {
    background-color: @mixinColor;
}

然后要么包含它...

一个:全局

#namespace > .getNsColor;
.selector { 
  .testMixin1(@nsColor); 
}

或两个:本地

.selector { 
  #namespace > .getNsColor;
  .testMixin1(@nsColor); 
}

两者都会输出...

.selector {
  background-color: #333333;
}