CSS : Automatic width variable calculation

Question

Hi @all !

let's say I have 2 helper classes as :

.w3-4 {
  width: calc((100% / 4) * 3);
}

// AND

.mr-10 {
  margin-right: 10px;
}

Do you think there is a automated pure css way to substract the margin value from .mr-10 to the width from .w3-4 ?

Something such as

.mr-10 {
  margin-right: 10px;

  // width calc
  width: calc(--width - 10px);
} 

There are plenty of ways to do this with SASS or even JS, but I'm just a bit lazy and curious :)

Thanks for your answers,

A.

Solution 1

You can declare --width variable in all width classes and manupulate width in margin css

div {
  border: 1px solid;
  margin-bottom: 10px;
  text-align: center;
}
.w3-4 {
  width: calc((100% / 4) * 3);
  --width: calc((100% / 4) * 3);
}
.w1-2 {
  width: calc(100% / 2);
  --width: calc(100% / 2);
}
.w1-4 {
  width: calc(100% / 4);
  --width: calc(100% / 4);
}


.mr-10 {
  margin-right: 10px;
  width: calc(var(--width) - 10px);
}

<div class="w3-4">
width 3/4
</div>
<div class="w1-2">
width 1/2
</div>
<div class="w1-4">
width 1/4
</div>
<div class="w3-4 mr-10">
width 3/4 with 10px margin-right
</div>
<div class="w1-2 mr-10">
width 1/2 with 10px margin-right
</div>
<div class="w1-4 mr-10">
width 1/4 with 10px margin-right
</div>

Solution 2

I think you can do this like

.mr-10 {
    width: calc((100% / 4) * 3 - 25px);
} 

where 25px value can vary

Comments

[Alexis Wollseifen]

Yeah but the issue with this solution is that I can't reuse the snippet. I have multiple helper classes such as .w1-4, .w2-4, etc. I'm looking for a DRY solution but in plain css :)

[Alexis Wollseifen]

All right ! So we have to declare the variable, there is no "this element width" - 10px for example ? But this is close from what I'm looking for, thanks a lot :)

[Moiz Shafqat Husain]

Okay, then you need to fix it or use any server side language to achieve this. Server side language can be PHP or any which you are using

[Alexis Wollseifen]

I understand, CSS has not implement this utility for now. Actually the answer from @supraja just above is close from what I'm looking for, in plain CSS. Still a superfluous line, but I suppose there is not a "this.width" equivalent in CSS yet

[Moiz Shafqat Husain]

yes right :-) you can accept any answer no worries.

[Ark-kun]

>width: calc(var(--width) - 10px);: How does this work when --width: calc(100% / 2); is set in some ancestor element? How is that 100% / 2 calculated?