7

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

我正在考虑这样的代码：

#namespace {
    @nsColor: #333;
}

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

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

或者...

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

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

4

1 回答 1

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);
}

然后调用不带或带值：

.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 本身

如果将变量捆绑到 mixin 本身，则可以访问它。所以...

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

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

然后要么包括它...

一：全球

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

或两个：本地

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

两者都会输出...

.selector {
  background-color: #333333;
}
于 2012-10-28T19:27:20.800 回答