49

CSS calc 関数を別の CSS calc 関数内で使用するにはどうすればよいですか? この投稿によると、それは可能ですが、その例はありません。

4

3 に答える 3

58

別の calc() 内で calc() を使用することができます。

例：

div{
  width: calc(100% - (1% + 30px));/* calc(1% + 30px) is nested inside calc()*/
}
div p{
  width: calc(100% - 30px);/*100% is total width of the div*/
}

css 変数を使用してネストされた calcを更新します。

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

すべての変数が展開された後、widthC の値は calc( calc( 100px / 2) / 2) になり、それが .foo の width プロパティに割り当てられると、内部のすべての calc() は (ネストの深さに関係なく)平坦化されて、したがって、width プロパティの値は最終的に calc( ( 100px / 2) / 2)、つまり 25px になります。要するに: calc() 内の calc() は単なる括弧と同じです。

したがって、現在の仕様でも、calc() 内で括弧を使用すると、ネストされた calc であることが証明されます。

css 変数の詳細については、こちらをご覧ください。

于 2014-12-22T05:37:19.970 に答える
12

あなたが引用したリファレンスは確かに少し混乱しています。

関数を別の 内で使用することはできません。calccalc

ここの仕様から: http://dev.w3.org/csswg/css-values/#calc-notation

... calc() 式のコンポーネントは、リテラル値、attr() または calc() 式、または値にすることができます..

calc式の中に式を含めることはできますが、calc()関数自体はできません。

そして、ネストされた式のその参照に例が示されています。

width: calc(100%/3 - 2*1em - 2*1px);

また、calc複数のプロパティの複数の場合:

margin: calc(1rem - 2px) calc(1rem - 1px);

上記の仕様の構文:

calc() 関数の構文は次のとおりです。

<calc()> = calc( <calc-sum> ) 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]* 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]* 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

<dimension> はディメンションです。

さらに、+ 演算子と - 演算子の両側に空白が必要です。( * および / 演算子は、前後に空白なしで使用できます。)

UA は、NUMBER、DIMENSION、または PERCENTAGE のそれぞれが用語である、少なくとも 20 の用語の calc() 式をサポートする必要があります。calc() 式にサポートされている数よりも多くの用語が含まれている場合は、無効であるかのように処理する必要があります。

.

于 2014-12-22T05:45:21.703 に答える