0

編集: user1737909 のアドバイスを実装しようとしました。.pie.size-{size}:BEFORE属性セレクター (つまり ) の代わりにクラス (つまり ) を使用する.pie[data-value={size}]:BEFOREと、最初のステップを通り越して、.css ファイルの読み込みが妨げられなくなりました。残念ながら、スタイラスで文字列を変数に連結するのが難しいため、回転量を設定できませんでした。次のいずれも機能しません。正しい構文は何ですか?

transform rotate(size+1+'deg')

transform rotate({size}+1+'deg')

foo = size+1+'deg'
transform rotate(foo)

bar = 'rotate('+size+1+'deg)'
transform bar
-webkit-transform bar

それができない場合、css/html ゲージを作成するためのアイデアはありますか?

mixinのすべての投稿に表示される放射状ゲージをCSSで作成しています。例として、CSS で円グラフを作成するためにこのコードを使用しています。円グラフ ウェッジの値の設定は、以下のコードの「データ値」を変更するのと同じくらい簡単です。

<div class="pie" data-start="0" data-value="30"></div>

残念ながら、コードは静的 css に対応しています。

.pie[data-value="30"]:BEFORE {
    -moz-transform: rotate(31deg); /* Firefox */
    -ms-transform: rotate(31deg); /* IE */
    -webkit-transform: rotate(31deg); /* Safari and Chrome */
    -o-transform: rotate(31deg); /* Opera */
    transform:rotate(31deg);
}

これは静的なイラストでは機能しますが、私のページにはさまざまなサイズのウェッジが含まれます。最も簡単な解決策は、360 度すべてに新しいエントリを作成することですが、これはひどい考えに思えます。

私の考えは、'data-value' を設定すると同時に、jade mixin 内の各ゲージのスタイルを定義することです。何かのようなもの：

pieStyle = '-moz-tranform: rotate('+ degreesPlusOne + 'deg); -ms-tranform: rotate('+ degreesPlusOne + 'deg); -o-tranform: rotate('+ degreesPlusOne + 'deg); -webkit-tranform: rotate('+ degreesPlusOne + 'deg); tranform: rotate('+ degreesPlusOne + 'deg)'

.pie2(data-start='0', data-value=degrees, style=pieStyle)

残念ながら、設定されるスタイルは「.pie」ではなく「.pie:BEFORE」です。ミックスイン内でこの疑似要素を使用してスタイルを設定する方法はありますか?

あるいは、スタイラス内でこれを解決する方法はありますか? 私が取り組んでいるサイトはニュース アグリゲーターであり、どのユーザーもこれらのゲージを数十、場合によっては数百と見ることになります。このような環境では、360 セットすべてを CSS の一部として単純に送信し、将来キャッシュでそれらを参照する方が、それほど長期的ではないのでしょうか?

前もって感謝します。

4

1 に答える 1