css - 更少的条件执行

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

我when not(@a)在第二个 mixin 中添加了，所以它本身不会被包含在内。你也可以把它放在受保护的 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 并更准确地指定了您的问题，那么可能会有更合适的解决方案。