0

これは確かに尋ねられたことだと思いますが、検索するのに適切な言い回しができないようです。

何かにスプライトを使用することに行き詰まっています。HTML 内の要素の位置に基づいて背景の位置を自動的に計算したいと考えています。

これは、うまくいけばより意味のあるコードです (これは実際には機能しません。これは、私がやりたいことを示すためのものです)。

HTML:

<ul>
    <li><!--first item--></li>
    <li><!--second item--></li>
    <li><!--third item--></li>
</ul>

CSS:

ul li {
    background-position-x: (number of previous LIs * 45px) + 45px;
}

これが可能であると思わせるのは、この記事のコードの一部です。

:nth-child(N)2n- 提供された単純な代数式 (または など)に基づいて要素を選択します4n-1。偶数/奇数要素の選択、「3 分の 1」、「最初の 5 つ」などの機能があります。

4

2 に答える 2

4

いくつかの特定のケースを除いて、これを CSS で使用することはできません (既に述べた N 番目の要素など)。ただし、CSS に「コンパイル」された他の言語を使用できます。SASS (Syntactically Awsome Style Sheets) である Sassy CSS の略である SCSS を使用していますが、SASS 構文の代わりに CSS に似た構文を使用しています (中括弧は使用しません)。

http://sass-lang.com/では、両方が説明されています。

Leafo の優れた SCSS to CSS コンパイラーを使用しています。SCSS を入力すると、コンパイラが必要に応じて CSS を生成します。

SCSS の素晴らしい点は、CSS と互換性があることです。そのため、CSS ファイルの名前を .scss に変更することから始めることができます。その後、変数と代数でそれらを強化できます。

ただし、「100% - 10px」を自分で定義する方法をよく検索しましたが、これは CSS では不可能だと思います。したがって、SCSS ではそれもできません。なんでもCSSにコンパイルされているので、そもそもCSSでできることしかできません。SCSS は、それをより簡単にするのに役立ちます。

于 2013-06-07T21:43:12.920 に答える