CODEWITHSUNDEEP
htmlcss
Paul Kruger
Paul Kruger

Reputation: 2304

Shorten "width: calc(... - (margin * 2))"

Is there any way to shorten this code? By creating a class or anything. My ideal solution would be something like this: <input style="width: 50%">. But my biggest problem is that I need to subtract the width of the input elements' margins.

I want a way to remove that repition of calc(... - var(--marginDouble))

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

div {
    font-size: 0;
}

input {
    margin: calc(var(--margin));
    box-sizing: border-box;
}
<div style="width: 400px; background-color: rgb(185, 185, 185)">
    <input style="width: calc(50% - var(--marginDouble))">
    <input style="width: calc(50% - var(--marginDouble))">
    <br>
    <input style="width: calc(25% - var(--marginDouble))">
    <input style="width: calc(25% - var(--marginDouble))">
    <input style="width: calc(25% - var(--marginDouble))">
    <input style="width: calc(25% - var(--marginDouble))">

    <input style="width: calc(20% - var(--marginDouble))">
    <input style="width: calc(20% - var(--marginDouble))">
    <input style="width: calc(20% - var(--marginDouble))">
    <input style="width: calc(20% - var(--marginDouble))">
    <input style="width: calc(20% - var(--marginDouble))">
</div>

Upvotes: 4

Views: 218

Answers (6)

Paul Kruger
Paul Kruger

Reputation: 2304

In my opinion James Long's answer is the best, but I prefer doing it this way:

:root {
    --w10: calc( 10% - (var(--marginInputs) * 2) );
    --w25: calc( 25% - (var(--marginInputs) * 2) );
    --w50: calc( 50% - (var(--marginInputs) * 2) );
    --w75: calc( 75% - (var(--marginInputs) * 2) );
    --w34: calc( 34% - (var(--marginInputs) * 2) );
    --w66: calc( 66% - (var(--marginInputs) * 2) );
    --w100: calc( 100% - (var(--marginInputs) * 2) );
}

And then using it by going width: var(--wX).

The reason why I find this to be better is because you don't need to add the line width: calc(var(--width, 100%) - var(--marginDouble)) to every element you want to affect. With width: var(--wX) you can easily use this calc on any element.

Upvotes: 0

James Long
James Long

Reputation: 4736

You could put the percentage into a custom property.

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

div {
    font-size: 0;
}

input {
    margin: calc(var(--margin));
    box-sizing: border-box;
    width: calc(var(--width, 100%) - var(--marginDouble))
}
<div style="width: 400px; background-color: rgb(185, 185, 185)">
    <input>
    <br>
    <input style="--width: 50%">
    <input style="--width: 50%">
    <br>
    <input style="--width: 25%">
    <input style="--width: 25%">
    <input style="--width: 25%">
    <input style="--width: 25%">

    <input style="--width: 20%">
    <input style="--width: 20%">
    <input style="--width: 20%">
    <input style="--width: 20%">
    <input style="--width: 20%">
</div>

Upvotes: 2

Mr Lister
Mr Lister

Reputation: 46559

Here's a solution that doesn't require classes or rows or extra variables.

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

div {
    font-size: 0;
}

input {
    margin: calc(var(--margin));
    box-sizing: border-box;
    width:calc(50% - var(--marginDouble));
}

input:nth-child(n+3) {width:calc(25% - var(--marginDouble));}
input:nth-child(n+7) {width:calc(20% - var(--marginDouble));}
<div style="width: 400px; background-color: rgb(185, 185, 185)">
    <input>
    <input>

    <input>
    <input>
    <input>
    <input>

    <input>
    <input>
    <input>
    <input>
    <input>

</div>

Upvotes: 0

SuperDJ
SuperDJ

Reputation: 7661

You can specify a variable with the inline style:

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

div {
    font-size: 0;
}

input {
    margin: calc(var(--margin));
    box-sizing: border-box;
    width: calc(var(--input-width) - var(--marginDouble))
}
<div style="width: 400px; background-color: rgb(185, 185, 185)">
    <input style="--input-width: 50%">
    <input style="--input-width: 50%">
    <br>
    <input style="--input-width: 25%">
    <input style="--input-width: 25%">
    <input style="--input-width: 25%">
    <input style="--input-width: 25%">

    <input style="--input-width: 20%">
    <input style="--input-width: 20%">
    <input style="--input-width: 20%">
    <input style="--input-width: 20%">
    <input style="--input-width: 20%">
</div>

Upvotes: 0

Daniel B&#252;rckner
Daniel B&#252;rckner

Reputation: 363

Try creating a class and use it in your HTML code.

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

div {
  font-size: 0;
}

input {
  margin: calc(var(--margin));
  box-sizing: border-box;
}

.fiftypercent {
  width: calc(50% - var(--marginDouble));
}

.twentyfivepercent {
  width: calc(25% - var(--marginDouble));
}

.twentypercent {
  width: calc(20% - var(--marginDouble));
}
<div style="width: 400px; background-color: rgb(185, 185, 185)">
  <input class="fiftypercent">
  <input class="fiftypercent">
  <br>
  <input class="twentyfivepercent">
  <input class="twentyfivepercent">
  <input class="twentypercent">
</div>

Upvotes: 0

Nandita Sharma
Nandita Sharma

Reputation: 13407

Wrap the similar inputs in a span and add styles as shown below.

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

div {
  font-size: 0;
}

input {
  margin: calc(var(--margin));
  box-sizing: border-box;
}

.a input {
  width: calc(50% - var(--marginDouble));
}

.b input {
  width: calc(25% - var(--marginDouble));
}

.c input {
  width: calc(20% - var(--marginDouble));
}
<div style="width: 400px; background-color: rgb(185, 185, 185)">
  <span class="a">
    <input >
    <input>
  </span>
  <br>
  <span class="b">
    <input>
    <input>
    <input>
    <input>
  </span>
  <span class="c">
    <input>
    <input>
    <input>
    <input>
    <input>
  </span>
</div>

Upvotes: 0

Related Questions