一般问题

我有媒体查询，我在其中更改某些文本元素，如下所示：

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 值？

我的尝试

我不是在寻找这个答案 https://stackoverflow.com/a/17699537/738672 or 这个答案 https://stackoverflow.com/a/20256708/738672，其中在函数中包含 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 不构建超过第一个元素？我不完全理解什么时候打印/返回某些东西，所以也许我的处理方式都是错误的？

正如已经提到的，您的尝试即将完成，但由于可变可见性规则，它不起作用。 请注意，每个.selector-list迭代定义新的@selector-list在当前范围内具有更高优先级但不会覆盖的变量@selector-list外部作用域的变量（即前面的作用域）.selector-list迭代和above）。所以当你使用@selector-list在最初的之后.selector-list调用你获取“最高”中设置的值.selector-list迭代（即第一个迭代@i = 1).

要“返回”递归循环的最后一次迭代的值，您需要使用该值定义一个变量only在最后一次迭代中。通常，最简单的方法是提供一个“终端”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 上下文中并不总是一个好主意。主要问题是 Less 不会将此类字符串视为“本机”选择器，并且大多数高级 Less 功能无法与它们一起使用（例如，Less 无法识别,, &和类似的元素，所以这样的规则不能嵌套，extend也看不到这样的选择器等）。 另一种更“不太友好”的方法是将此类列表定义为 mixin 而不是变量，例如：

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

etc.

-

附：另外，更一般地说，不要错过在 Less 中媒体查询可能会放入选择器规则集中，因此根据用例，一次编写选择器列表并在其中设置媒体相关样式通常也更容易（即，与标准 CSS 方法相反，您必须为每个媒体查询重复相同的选择器）。