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.

<input style="width: 50%">

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

calc(... - var(--marginDouble))

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

div {
font-size: 0;
}

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

7 Answers
7

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

var(--w,100%)

,100%

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

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

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

You can simplify like this:

:root {
--margin: 10px;
}

div {
font-size: 0;
}

input {
margin: var(--margin);
width: calc(var(--w,20%) - var(--margin) * 2);
box-sizing: border-box;
}

You can also avoid inline style using nth-child

nth-child

:root {
--margin: 10px;
}

div {
font-size: 0;
}

input {
margin: var(--margin);
width: calc(var(--w,20%) - var(--margin) * 2);
box-sizing: border-box;
}
input:nth-child(1),
input:nth-child(2) {
--w:50%;
}
input:nth-child(3),
input:nth-child(4),
input:nth-child(5),
input:nth-child(6){
--w:25%;
}

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

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

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.

width: calc(var(--width, 100%) - var(--marginDouble))

width: var(--wX)

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.