CSS calc() written in different way

user_4754624 0
Viewed 603

I'm having issues with the CSS calc() function and CSS minifier. In my source .css file, I have variable

margin-left: calc(15px - 20%);

However, when the source file is translated with the minifier, I get the output

margin-left: calc(-20%+15px);

And that value cannot be read properly in the web browser - all I can see in Chrome dev options is margin-left: calc(-20%+15px);, with the warning sign next to it saying "Invalid property value".

How can I avoid that, maybe write calc() function in different way to fix this issue? Changing places of variables in the source .css files doesn't make any changes, and I don't have an option to use different minifier.

css-calc minify css
1 Answers

You can try to write it this way:

.box {
 margin-left: calc(-1*calc(20% - 15px));
}
<div class="box">
</div>

user_86203330
Related