0

私は現在LESSを使用しています。私はCSSスプライトを使用しているので、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;
}
.................
4

1 に答える 1

1

出来ますか ？

残念ながら、そうではないと思います。while()LESSはコンパイルされた言語であり、またはのような反復制御構造を（まだ？）サポートしていません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]、の結果が原因で、ページごとに1つの要素に対してのみ動的です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>
于 2012-12-04T12:07:28.143 に答える