Less 在较少的文件中时有条件

我正在为WordPress制作一个主题编辑器，我想用更少的资源来构建CSS文件

我在变量中放入了一个字符串，如下所示：

@banner-separation-style: 'thick_border';

when (@banner-separation-style = 'thick_border') {
    header {
        ... some style
    }
    ... and some css selectors
}

然后我尝试使用when（）如下所示：

@banner-separation-style: 'thick_border';

when (@banner-separation-style = 'thick_border') {
    header {
        ... some style
    }
    ... and some css selectors
}

我也尝试过不引用变量的组合

如何正确地创建类似于if块的内容，而if块的数量较少？

防护（

when

语句）只能与或一起使用。如果不使用这些语句之一，我们就无法编写

when

语句。所以，要么用下面的mixin编写它：

@横幅分隔样式：“厚_边框”；
.border-style（）当（@banner分隔样式='thick_border'）{
标题{边框：2px纯红；}
导航{边框：2px纯绿色；}
}
.边框样式；

或者直接使用CSS选择器，如下所示：

@横幅分隔样式：“厚_边框”；
标题（@banner分隔样式='thick_border'）{
边框：2倍纯红；
}
导航时间（@banner分隔样式='thick_border'）{
边框：2倍纯绿；
}

或者至少使用未命名的选择器（

&

），如下所示：

@横幅分隔样式：“厚_边框”；
&当（@banner分隔样式='thick_border'）{
标题{边框：2px纯红；}
导航{边框：2px纯绿色；}
}

---

第一个版本（使用mixin）是我更喜欢的版本，因为（a）您不必像CSS选择器版本那样多次重复该条件，（b）为mixin指定名称使其比使用未命名选择器更可读。这只是我的选择，其他一些用户可能会更喜欢最后一个，因为它不需要额外的mixin call语句。

下面的答案，不需要时请不要使用引号-只要

厚边框

（而不是

厚边框

）就足够了（和

厚边框

更适合计算变量命名的样式）。mixin有效。在询问之前，我尝试了“header when…”版本，但不起作用。现在再试一次，仍然不起作用。还尝试了“body when（…）{header{}”''.'可能是我的less编译器。@frodeborli:CSS+guard选项只是在编译器的更高版本（如果我没记错的话，是v1.6）中引入的，您的编译器是最新的吗（或者）您是否使用less.js的其他端口，如dotLess、LessHP等？这可能是原因。