変数によっていくつかのCSSプロパティを設定する

Question

変数をCSSクラスに追加したいとします。それは可能ですか？私は、次のような何かをしたい意味：

#box[i] 
{ 
    padding: [i]px; 
} 

（例：。名前であるdiv要素「BOX10は」10pxのパディングを取得することになっている）

私は、これは権利ではないかもしれない理解します私はクラスのプロパティを可変値に設定するコンセプトを達成するのを助けてくれることを願っています。

Answer 1

現在、CSS内で変数を使用することはできませんが、他にもいくつかのオプションがあります。

• 最も単純なオプションは、ボックスIDごとにCSSスタイルを作成することです。

• パッディングをボックスに追加するにはJavaScriptを使用できますが、ロジック内にプレゼンテーションを含めることはできません。 jQueryのでは、これを行うためのループは（あなたの箱をしていると仮定した場合）のようになります。

  $('div[id^=box]').each(function() { 
      $(this).css('padding',this.id.substr(3)+'px'); 
  }); 
  

• あなたのCSSで変数を設定するためにこのようなLESSなど、プリプロセッサのツールを使用することができます。各セレクターを指定する必要があります。

異なるボックスID値に基づいてパディングを設定することは、奇妙な問題のようです。このページを作成するあなたのアプローチが正しいかどうかを見てみる価値があるかもしれません。ページ上のすべてのIDが一意でなければならないことを忘れないでください。複数の要素で同じIDを使用する場合は、CSSクラスを使用する必要があります。

多くの結果（投票結果など）に基づいてサイズのボックスを作成しようとすると、スタイル属性を使用してIDを作成するのではなく、各要素に幅/パディングを設定しやすくなりますすべての可能な結果に対して例：

<div style="width:10px"></div> 

Answer 2

いいえ、純粋なCSSで行うことはできませんが、lessを使用できます。

CSS変数は現時点でW3C draftにのみ導入されており、ブラウザではまだサポートされていません。

Answer 3

uは「名前」を検出して部分文字列を取得するためにjavascriptを使用するだけで、番号を持つことができます。