Question

我目前正在使用LESS。由于我使用CSS sprites，我想知道LESS是否支持这种语法：

icon{x}{
  background-position:-10px -10*{x}px;
}

因为我必须创建这种CSS样式：

icon1{
  background-position:-10px -10px;
}
icon2{
  background-position:-10px -20px;
}
icon3{
  background-position:-10px -30px;
}
.................

Answer 1

有可能吗？

不幸的是，我认为不是。 LESS是一种编译语言，不支持（还有？）迭代控制结构，如while()或for()。
要开始回答，我会写下面的HTML代码：

<div id="1" class="icon"></div>
<div id="2" class="icon"></div>
<div id="3" class="icon"></div>

使用以下LESS代码：

.dynamic-background(@i)
{
    background-position: -10px (-10px * @i);
}

@var: `document.getElementsByClassName('icon')[2].id`;

.icon
{
    .dynamic-background(@var);
}

这将导致以下CSS代码：

.icon
{
    background-position: -10px -30px;
}

但是正如您所看到的，由于[x]的结果为getElementsByClassName，因此此代码仅针对一个元素逐页动态生效。也许还有一个我在那里缺少的额外技巧。

替代解决方案

也许你可以只使用Javascript：

<script type="text/javascript">
    var elems = document.getElementsByClassName('icon');
    for (var i=0; elems[i]; i++)
        elems[i].style.backgroundPosition = '-10px -'+elems[i].id*10+'px';
</script>

结果如下：

<div id="1" class="icon" style="background-position: -10px -10px;"></div>
<div id="2" class="icon" style="background-position: -10px -20px;"></div>
<div id="3" class="icon" style="background-position: -10px -30px;"></div>

LESS是否支持这种语法？

1 个答案:

有可能吗？

替代解决方案