Question

由于某种原因，第n个孩子的输出会呈现出意外的空间。有人可以帮忙吗？

渲染：

// 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

注意：正如问题的his comments中的七个阶段最大值所提到的，这是一个已经在v2.x中修复的错误 。留下这个答案（使用解决方案）可以帮助那些因任何原因无法升级编译器的未来读者。

问题仅发生在使用选择器插值并嵌套在一个或多个父选择器中的选择器中。它可以通过使用包含伪选择器的临时变量来解决，如下所示:(它使用转义字符串功能）

选项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;
}

相关链接：

如上所述，在链接的问题主题中，只有当选择器使用选择器插值形成并且嵌套在一个或多个父级下时才会出现问题。

此作品

// 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;
    }
}

Less为变量添加了意外的空间

1 个答案: