Question

我正在为WordPress制作主题编辑器，并希望使用less来构建CSS文件。

我在这样的变量中放了一个字符串：

@banner-separation-style: 'thick_border';

然后我试图像这样使用when（）：

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

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

如何正确创建与if-blocks类似的东西？

Answer 1

警卫（when声明）只能与mixin或CSS selector一起使用。我们不能在不使用其中一个的情况下编写when语句。所以，要么用下面的mixin写它：

@banner-separation-style: 'thick_border';
.border-styles() when (@banner-separation-style = 'thick_border') {
    header { border: 2px solid red; }
    nav { border: 2px solid green; }
}
.border-styles;

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

@banner-separation-style: 'thick_border';
header when (@banner-separation-style = 'thick_border') {
    border: 2px solid red;
}
nav when (@banner-separation-style = 'thick_border') {
    border: 2px solid green;
}

或至少使用未命名的选择器（&），如下所示：

@banner-separation-style: 'thick_border';
& when (@banner-separation-style = 'thick_border') {
  header { border: 2px solid red; }
  nav { border: 2px solid green; }
}

第一个版本（使用mixin）是我喜欢的版本，因为（a）您不必像CSS选择器版本那样多次重复该条件，并且（b）给mixin一个名字使它成为它比使用未命名的选择器更具可读性。这只是我的选择，而其他一些用户实际上更喜欢最后一个，因为它不需要额外的mixin调用语句。

在较少文件中有条件

1 个答案: