CSSのcalcで、かっこつきの計算をしたいです

Question

CSSのcalc()で、以下のように（ ( ● + 2rem ) × 3 ）という記述はできないのでしょうか？

ul {
  height: calc((var(--w_thumbnail)+2rem) * 3);
}

--w_thumbnailというのがliの高さなのですが、このliにはmarginが2remついているので、そのmaringを加えて、さらにliの3つ分という高さをulに持たせたいのです。

以下のように3つ分の高さをulに持たせたいのです。

<ul>
  <li><img class="thubbnail"><p>a</p><li>
  <li><img class="thubbnail"><p>b</p><li>
  <li><img class="thubbnail"><p>c</p><li>
<ul>

できるような書き方ございますでしょうか？

Answer 1

calcで足し算・引き算を行う場合、符号でなく演算子であることをはっきりさせるため、前後にスペースが必要です（MDN）。

ul {
  height: calc((var(--w_thumbnail) + 2rem) * 3);
}

Comments

[tefu-tefu]

おお~、理由つきでどうもありがとうございます。

Answer 2

calcを入れ子にしてみてください。

calc(calc(〇 + 2rem) * 3)

Comments

[tefu-tefu]

入れ子なんてできたんですね。ありがとうございます。