問題タブ [css-variables]

css ファイルのセット (react コンポーネントごとに 1 つ) を持つプロジェクトがあります。私は、webpack と postcss-cssnext で css-loader (モジュールをオン) を使用しています。

variables.css理想的には、css ファイル間で変数を共有できるように単一が必要です。私はvariables.css次のようなものを含めてみました:

それをインポートして、cssローダーを通過します。問題は、他のファイルがこれらの変数を取得しないため、これが機能しないか、何か間違っていることです (これをコンポーネント css ファイルに直接含めると機能します)。

機能することの 1 つはstyles.json、次の webpack セットアップを含むファイルを用意することです。

ただし、これに関する主な問題は、変数を変更するたびに、webpack dev サーバーを再起動する必要があることです (したがって、webpack 構成をリロードします)。これは理想的ではありません。

それで、これを行うためのより良い方法について何か考えはありますか？

次のCSSがあるとしましょう：

私のマークアップは次のとおりです。

私の質問は、上記の CSS は次のように変換されますか?

または追加がありますか

変数がない場合、ユニバーサル セレクターはすべての要素に同じ CSS を適用します。これは変更され、スタイリングは要素に依存するようになりますか?

私が持っているもう 1 つの質問は、CSS に:root変換するかどうかです。body

ここに CodePen のデモがあります: http://codepen.io/anon/pen/RrvLJQ

var(…)JavaScript (プレーンまたは jQuery) を使用して、CSS カスタム プロパティ (スタイルシートでアクセスされるもの) をどのように取得および設定しますか?

ボタンをクリックすると、通常のfont-weightプロパティが変更されますが、カスタム--mycolorプロパティは変更されません。

I know I can use frameworks ( http://lesscss.org ) to accomplish this but I was wondering if pure CSS will support this any time?

CSS 変数の設定に calc() を使用した場合の動作に興味があります。

例：

ここで、 a などの#test要素の幅が 500px の場合、変数を 250px に設定しdivたいと思います。--halfWidth

しかし、私が知る限り、var(--halfWidth)他の場所で使用されているコードはcalc(100% / 2)、250px. つまり、要素 A の計算を後で要素 B で使用することはできません。たとえばwidth: var(--halfWidth);、変数が要素 A の幅の半分ではなく要素 B の半分の幅として設定されるためです。定義されています。

この動作に関するドキュメントを見つけようとして Web を精査しましたが、これまでのところ空白を描いています。

理想的には、calc を使用した CSS 変数の設定は、次の 2 つのバリアントで利用できる必要があります。

1. この例と同じように動作する 1 つのバリアントは、文字列をそのままドロップするだけで、文字列内の変数の置換を禁止します。
2. 単純に文字列を置き換える代わりに、calc() が計算結果を生成する 2 番目のバリアント。

これを達成する方法は？実際の実装はそれに適した人に任せたいと思いますが、1つの可能性はeval()一種のものです。のようeval(calc(100% / 2))に結果が得られ250pxます。

とにかく、誰かがこの動作に関する実際のドキュメント、または上記の例を取得して代わりに結果を生成する方法の解決策を持っている場合、私はすべて耳にします!

編集: 参考までに、 https ://drafts.c​​sswg.org/css-variables/ で仕様を読みました。

CSS 変数のフォールバック値でコンマを使用するにはどうすればよいですか?

たとえば、これは問題ありません:var(--color, #f00)ですが、これは変var(--font-body, Verdana, sans-serif)です。

font-familyアイデアは、フォールバック値が say の変数を使用してを設定できるようにすることVerdana, sans-serifです。

編集:これは実際には、CSS プロパティをサポートするブラウザーではかなりうまく機能しますが、問題は Google Polymer のポリフィルに起因するようです。

将来の参考のために、フォントとフォント ファミリの両方のフォールバックに変数を使用することになりました (今のところ、これが最もクリーンな方法のようです)。