Question

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

这是我的代码

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

.my-mixing(true);

它不起作用。
任何提示？

Answer 1

你不能以你想要的方式使用when，它总是必须在mixin-declaration之后出现。如果变量与守卫不匹配，则必须提供后备混音。

.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)，因此它本身不会被包含在内。您也可以将它放在受保护的mixin之前，以防止样式被覆盖。

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并更准确地指出了问题，那么可能会有更合适的解决方案。

条件执行少

2 个答案: