html - 使用当前值进行 CSS 计算

Question

如果我有一个像这样的设置类:

.MyClass {
  margin: 5px;
}

但是我想利用 calc 来设置组件的宽度，如下所示:

<button class="MyClass" style="width: calc(25% - 10px)"></button>
<button class="MyClass" style="width: calc(25% - 10px)"></button>
<button class="MyClass" style="width: calc(25% - 10px)"></button>
<button class="MyClass" style="width: calc(25% - 10px)"></button>

<button class="MyClass" style="width: calc(75% - 10px)"></button>
<button class="MyClass" style="width: calc(25% - 10px)"></button>

<button class="MyClass" style="width: calc(20% - 10px)"></button>
<button class="MyClass" style="width: calc(30% - 10px)"></button>
<button class="MyClass" style="width: calc(20% - 10px)"></button>
<button class="MyClass" style="width: calc(30% - 10px)"></button>

有没有办法让它变得更加动态？这样我就可以在类中编辑边距，然后我不需要在其他地方编辑 10px (因为我有 100 多个按钮)。我希望有这样的事情:

calc(25% - margin)

Answer 1

谢谢大家的回答。我相信这是目前最简单的解决方案:

:root {
    --margin: 5px;
    --marginDouble: var(--margin) * 2;
}

.MyClass {
  margin: 5px;
}

calc(25% - var(--marginDouble))