LESS是否支持这种语法?

时间:2012-12-04 05:16:26

标签: css less

我目前正在使用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;
}
.................

1 个答案:

答案 0 :(得分: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>