4

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

例：

#test {
    --halfWidth: calc(100% / 2);
}

ここで、 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/ で仕様を読みました。

4

2 に答える 2

0

これは、答えが次のようにならないため、答えるのが難しい質問です。

このようにしてください...そうすればうまくいきます

あなたが直面している問題は、CSS の通常の動作です。スタイルをカスケードします。あなたが達成しようとしていることがうまくいくとしたら、しばらくすると本当に面倒になります。

このように変数を定義できるとは、なんてクールなんだろう

#test {
    --halfWidth: calc(100% / 2);
}

var(--halfWidth)常にあるべき場所calc(100% / 2)。常に親要素の半分の幅になることに気付きましたか?

1000pxプログラマーが数か月後にあなたのコードを読んで幅がsetのボックスを持っていて--halfWidth、今では幅が広いとしたら、どれほど奇妙になるか想像してみてください250px... インターネットが壊れていると思います:)それはただ500px広くあるべきです。

var目的を達成するには、親要素の幅を定義するさまざまな を定義できます/定義する必要があります。そして、それを子供たちに分けます。

于 2016-05-23T08:12:53.550 に答える