css - 如果定义了变量，则调用 mixin

Question

我尝试在 when 条件下使用 mixin 守卫，但在编译过程中出现以下错误:

.mixin is undefined

.mixin (@color) when (isstring(@color)) {
  //some code
}

.mixin(#008000);

当我删除 when 条件时，它会起作用。这里有什么问题？

---

问题是我们的 less 文件中有变量，这些变量是在一个编译过程中定义的。但是在另一个编译过程中，这个变量没有被定义，因为我们在这里需要一点动态。

所以我必须检查变量是否被定义。当我再次尝试时

$variables = [
   'testColor' => '#fff111',
];
$lessc->setVariables($variables);
$cachedCompile = $lessc->cachedCompile($publicPath .   $inputFile);

和

.mixin (@color:none) when (iscolor(@color)) {
   color: #fff;
}

.mixin(@testColor);

一切正常。但是，当我删除变量数组中的 testColor 变量时，它会崩溃，因为它未定义。

Answer 1

您的问题可能是因为您试图将一个不存在的变量 (@testColor) 作为参数传递给混入。尝试将以下行添加到 Less 文件的最顶部。

@testColor: none;

由于 Less 会延迟加载变量，如果在编译期间设置了一个值，则应该覆盖 none。如果在编译期间没有设置变量，上面的行仍然意味着变量已定义并具有一些默认值。

---

Less 中没有直接的isnull 或isnotnull 类型的函数。但是，您可以通过为混合宏分配一个默认值来模仿该行为。

在下面的示例中，我们将默认值指定为 none，这不是颜色，因此当检查 iscolor(@color) 条件时，它将失败并且mixin 不会产生任何输出。

我还在下面添加了一个 not 条件，供您查看不同之处。

.mixin (@color:none) when (iscolor(@color)) {
  //some code
  color: is defined;
}
.mixin (@color:none) when not (iscolor(@color)) {
  //some code
  color: is not defined;
}

#output1{
  .mixin();
}
#output2{
  .mixin(#ff0000);
}
#output3{
  .mixin(abcd);
}