css - 更少的条件执行

Question

通过使用 LESS ，我正在尝试在混合中执行条件

这是我的代码

.my-mixing (@isInverse) {
    .navbar {
        when(@isInverse) {
            .navbar-inverse;
        }
    }
}

.my-mixing(true);

它不起作用。
有什么提示吗？

Answer 1

您不能按照您尝试的方式使用 when，它总是必须出现在 mixin 声明之后。如果变量与守卫不匹配，则必须提供后备混入。

.my-mixing (@isInverse) {
    .navbar {
       .navbar-inverse(@isInverse);         
    }
}

.navbar-inverse(@a) when(@a){
   /* do something if it matches */
}
.navbar-inverse(@a) when not(@a){
  /* do something else (or nothing at all) */
}

.my-mixing(true);

我在第二个 mixin 中添加了 when not(@a)，所以它本身不会被包含。您也可以将它放在 protected mixin 之前，以防止样式被覆盖。