web-dev-qa-db-ja.com

CSSの別のcalc（）内のcalc（）関数

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

csscss3css-calc
27
Raghavendra Prasad

別の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*/
}

nested calc をcss変数で更新：

.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変数の詳細 here 。

33
Bhojendra Rauniyar

私はcalc（）を定義するValues＆Units仕様のエディターの1人です。

calc（）should calc（）内にネスト可能。しばらくの間、文法/定義に見落としがありました技術的にでは許可されませんでしたが、最近修正しました。私の知る限り、実装はまだ追いついていません（tho Chrome 51とFirefox 48はこれを修正します、うーん！）。

とは言うものの、通常はcalc（）式をネストするための理由はゼロがあります。これらは完全に同一括弧を使用するだけです。これを行う唯一の理由は、カスタムプロパティ/変数を使用する場合です。

35
Xanthir