CODEWITHSUNDEEP
htmlcss
Frank
Frank

Reputation: 2431

Css Calc with current value

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)

Upvotes: 4

Views: 4166

Answers (2)

Sergo Kupreishvili
Sergo Kupreishvili

Reputation: 462

Learn and use CSS variables! It is very simple and powerful. Here is great video tutorial: https://scrimba.com/g/gcssvariables

Upvotes: 0

Frank
Frank

Reputation: 2431

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

Upvotes: 4

Related Questions