Assign unit of css variable

Question

Is it possible to assign type of unit to a CSS variable inside of the CSS property?

:root {
    --width: 400;
}

.class {
    width: var(--width); //assign 'px' as unit?
}

Mohamed Bdr · Accepted Answer · 2021-02-11 15:11:30Z

3

You can do that by using the calc() function by multiplying your var which don't have px value by 1px as in example:

As this will transform the value to px at the end.
I searched a lot but I think there is no way to just add px to the var without calc().

:root {
    --width: 200;
}

div.a {
    width: calc(var(--width) * 1px);
    border: 1px solid black; 
}

<body>
<h1>Test</h1>

<div class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</div>

</body>

answered Feb 11, 2021 at 15:11

Mohamed Bdr

9753 gold badges11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rsantos Over a year ago

This approach does not seem to work with fr units.

Collectives™ on Stack Overflow

Assign unit of css variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related