Question

第一篇文章，

我的问题是这个，

是否可能为迭代元素（而不是迭代的类/ ids ）做一个更少的循环，如果是这样什么我在做什么错误，如何我会这样做吗？

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
    .column-@{i} {
        width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i + 1));
}

以上是less features page上的示例通用循环节目，这真的很有趣，我觉得我想知道我可以用它做什么情况。我认为为不同的标题大小自动生成标题元素字体化将是完美的;以下是我的尝试

.headers-generator(6);

.headers-generator(@n, @i : 1) when (@i =< @n)
{
    h@{i}{
        font-size: (2em - ((@i - 1) * 0.2)em);
    }
        .headers-generator(@n, (@i + 1));
}

以下是预期输出

h1
{
    font-size: 2em;
}
h2
{
    font-size: 1.8em;
}
h3
{
    font-size: 1.6em;
}
h4
{
    font-size: 1.4em;
}
h5
{
    font-size: 1.2em;
}
h6
{
    font-size: 1em;
}

我正在使用 Visual Studio 2012 和 Web Essentials ， Web Essentials对此LESS的错误是“在属性和值之间缺少冒号”，它还告诉我大括号内的@i和@n是“未声明的”。

非常感谢。

Answer 1

这个mixin适用于LESS 1.6+。字体大小计算结束时的em引发了错误，因为em单位已经在计算中使用，所以没有必要。

.headers-generator(@n; @i : 1) when (@i =< @n)
{
  h@{i} {
    font-size: (2em - (@i - 1) * 0.2);    
  }

  .headers-generator(@n; (@i + 1));
}

.headers-generator(6);

LESS CSS嵌套循环元素

1 个答案: