一尘不染

使用LESS构建选择器列表

css

一般问题

我有媒体查询，可以在其中更改某些文本元素，例如：

body.single .entry-content p,
body.single .entry-content ul,
body.single .entry-content ol,
body.single .entry-content table {
    line-height: 1.8;
}

如何使用LESS仅构建选择器列表，而不构建相应的CSS值？

我的尝试

我不是在寻找这个答案或这个答案，它在功能中包括CSS。相反，我想象它像这样使用：

/* .selector-list() { ... } */

@text-elements: p, ul, ol, table;

.selector-list("body.single .entry-content", @text-elements);
@selector-list {
    line-height: 1.8;
}

它本质上是通过在父项（“ body.category”）之前添加逗号并将其添加到集合中的每个元素上来构建一个字符串化列表。这是我尝试测试输出的内容：

@text-elements: p, ul, ol, table;

.selector-list(@parent, @children, @i:1, @list:"") when (@i <= length(@children)) {
    @child: extract(@children, @i);
    @selector-list: "@{list} @{parent} @{child},";
    .selector-list(@parent, @children, (@i + 1), @selector-list);
}

.selector-list("body.single .entry-content", @text-elements);

section {
    content: @selector-list; // yields only " body.single .entry-content p,"
}

为什么@ selector-list不能建立在第一个元素之后？我不完全了解何时打印/退回某些内容，所以也许我会以所有错误的方式进行处理？

阅读 353

2020-05-16

共1个答案

一尘不染

如前所述，您的尝试几乎就在那里，由于可见性规则可变，因此无法正常工作。请注意，每次.selector-list迭代都定义了新@selector- list变量，该变量在当前作用域中具有更高的优先级，但不会覆盖@selector-list外部作用域（即先前.selector-list迭代及
以上迭代的作用域）中的变量。因此，当您@selector-list在首次.selector-list调用后使用时，您将获得“最高”
.selector-list迭代中设置的值（即第一个带有的值@i = 1）。

“重返”从递归循环的最后一次迭代的值，你需要使用此值定义一个变量只内的最后一次迭代。通常，最简单的方法是提供“终端”
mixin（即，递归mixin的最后一次调用的特殊化）。实际上，无论如何，您都将需要这样的终端来处理列表的最终逗号。例如：

＃1

.selector-list(@parent, @children, @i: 1, @list: "") when (@i < length(@children)) {
    @child: extract(@children, @i);
    .selector-list(@parent, @children, (@i + 1), "@{list} @{parent} @{child},");
}

.selector-list(@parent, @children, @i, @list) when (@i = length(@children)) {
    @child: extract(@children, @i);
    @selector-list: e("@{list} @{parent} @{child}");
}

// usage:

@text-elements: p, ul, ol, table;

.selector-list("body.single .entry-content", @text-elements);
@{selector-list} {
    line-height: 1.8;
}

--

＃2 与上述相同，只是稍微“优化”：

.selector-list(@parent, @children, @i: length(@children), @list...) when (@i > 1) {
    .selector-list(@parent, @children, (@i - 1),
        e(", @{parent}") extract(@children, @i) @list);
}

.selector-list(@parent, @children, 1, @list) {
    @selector-list: e(@parent) extract(@children, 1) @list;
}

// usage:

@text-elements: p, ul, ol, table;

.selector-list("body.single .entry-content", @text-elements);
@{selector-list} {
    line-height: 1.9;
}

--

＃3
一般而言，在Less上下文中，“基于字符串的选择器操作”并不总是一个好主意。主要的问题是少不把这样的字符串为“原生”选择和最先进的减配也不会与他们合作（如少也不会承认,，&和类似的元素有那么这样的规则不能嵌套，extend也无法看到此类选择器等。）。另一种“较少友好”的方法是将这样的列表定义为混合而不是变量，例如：

.text-elements(@-) {p, ul, ol, table {@-();}}

body.single .entry-content { 
    .text-elements({
        line-height: 1.8;
    });
}

和（当您还需要重用时body.single .entry-content /.text-elements/）：

.text-elements(@-) {
    p, ul, ol, table 
        {@-();}}

.selector-list(@-) {
    body.single .entry-content {
        .text-elements(@-);
    }
}

.selector-list({
    line-height: 1.9;
});

等等

--

PS另外，更笼统地说，请不要错过更少的媒体查询，可以将其放入选择器规则集中，因此，根据用例，编写一次选择器列表并设置依赖于媒体的样式通常也更容易在内部（例如，与标准CSS方法相反，您必须为每个媒体查询重复相同的选择器）。

2020-05-16