Less 向变量添加意外的 space

Question

出于某种原因，第 n 个子节点的输出呈现出意外 space。有人可以帮忙吗？

渲染：

// Part of render
body.domain-bsci-fta-local #block-domain-switcher ul li:nth-child( 3) {
  background-color: #e14313;
}

来自代码：

// Variables
@a-primary: #018f9e;
@b-primary: #2b6a7c;
@c-primary: #e14313;
@d-primary: #009966;

@domain-a: 'a-local';
@domain-b: 'b-fta-local';
@domain-c: 'c-fta-local';
@domain-d: 'd-fta-local';

@domains: @domain-a @a-primary 1, @domain-b @b-primary 2, @domain-c @c-primary 3, @domain-d @d-primary 4;

// Call
body {
  .generate-menus();
}

// Functions
.generate-menus() {
  .for(@domains);
  .-each(@domain) {
    @dn: e(extract(@domain, 1));
    @dc: extract(@domain, 2);
    @dr: extract(@domain,3);
    .generate-menu(@dn, @dc, @dr);
  }
}
.generate-menu(@domainname, @domaincolor, @domaincount) {
  &.domain-@{domainname} {
    #block-domain-switcher {
      ul {
        li {
          &:nth-child(@{domaincount}) {
            background-color: @domaincolor;
            a {
              border-bottom: 5px solid;
              color: white !important;
            }
          }
        }
      }
    }

    .navigation .submenu {
      background-color: @domaincolor;
    }
  }
}

// ............................................................
// .for

.for(@i, @n) {
  .-each(@i)
}

.for(@n) when (isnumber(@n)) {
  .for(1, @n)
}

.for(@i, @n) when not (@i = @n) {
  .for((@i + (@n - @i) / abs(@n - @i)), @n);
}

// ............................................................
// .for-each

.for(@array) when (default()) {
  .for-impl_(length(@array))
}

.for-impl_(@i) when (@i > 1) {
  .for-impl_((@i - 1))
}

.for-impl_(@i) when (@i > 0) {
  .-each(extract(@array, @i))
}

Answer 1

Note: As mentioned by seven-phases-max in to the question, this was a bug which has already been fixed in v2.x. Leaving this answer (with the work-around solution) as-is to help future readers who can't upgrade their compiler for whatever reason.

该问题仅发生在使用选择器插值且嵌套在一个或多个 parent 选择器中的选择器中。它可以通过使用一个包含 pseudo-selector 的临时变量来解决，如下所示：（它使用转义字符串功能）

选项 1：

ul {
    li {
        @selector: ~":nth-child(@{domaincount})"; /* the selector is formed here */
        &@{selector} { /* and used here */
            background-color: @domaincolor;
            a {
                border-bottom: 5px solid;
                color: white !important;
            }
        }
    }
}

选项 2：

li { 
    @count: ~"(@{domaincount})";
    &:nth-child@{count} { /* and used here */
        background-color: @domaincolor;
        a {
            border-bottom: 5px solid;
            color: white !important;
        }
    }
}

示例编译输出：

body.domain-a-local #block-domain-switcher ul li:nth-child(1) {
    background-color: #018f9e;
}

相关链接：

• concatenate values in less (css) without a space
• Redudant space in interpolated selectors like nth(...)

---

如上所述，在链接的问题线程中，仅当使用选择器插值形成选择器并嵌套在一个或多个 parent 下时才会出现此问题。

这个有效

// Variables
@list: a 1;

@num: extract(@list, 2);
// Usage
body div:nth-child(@{num}) {
  color: #444;
}

但这不是

// Variables
@list: a 1;

@num: extract(@list, 2);
// Usage
body {
    div:nth-child(@{num}) {
        color: #444;
    }
}