在less中的条件执行

Question

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

以下是我的代码

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

.my-mixing(true);

它不起作用。

有什么提示吗？

Answer 1

你不能以你想要的方式使用when，它总是必须出现在混合声明的后面。如果变量与保护不匹配，则必须提供备用混合。

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

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

Answer 2

给定以下html...

<div class="navbar">
    I am navbar!
</div>

这是一个可行的解决方案：

.navbar-inverse(@isInverse){
    // do nothing or whatever
}
.navbar-inverse(@isInverse) when(@isInverse){
    // apply styles for inverse navbar
}

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

但是，如果您能够显示您的html并更准确地说明您的问题，也许会有更合适的解决方案。