Css Calc with current value

Question

If I have a setup class like this:

.MyClass {
  margin: 5px;
}

But then I want to make use of calc to setup the width of components like this:

<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>

Is there a way to make this more dynamic? So that I can edit the margin in the class and then I don't need to edit the 10px everywhere else (because I have 100+ buttons). I was hoping for something like this:

calc(25% - margin)

Answer 1

Thank you for everyone's answers. I believe this is the easiest solution for now:

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

.MyClass {
  margin: 5px;
}

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