When using plain CSS calc in less I have to put a tilde before my calc string to stop less from calculating it, which works when doing - but does not when using +
What causes this and can I stop it from happening?
Examples:
width: calc(~"(100%) - 20px");
Results In:
width: calc((100%) - 20px);
But:
width: calc(~"(100%) + 20px");
Results In:
width: calc((100%)+ 20px);
Which is not valid css.
The only workaround I have figured out is:
width: calc(~"(100%) - -20px");
Results In:
width: calc((100%) - -20px);
Which is mathematically correct to do a + but why do the Bundling and Minification force me to have to do this?
As a side note, I use visual studio 2017 community and its bundling from the bundleConfig.cs
My style bundle looks like so:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/Content/css/BundledCSS")
.Include("~/Content/css/UpToDate/jquery-ui.css")
.Include("~/Content/less/bootstrap/bootstrap.css")
.Include("~/Content/css/font-awesome.css")
.Include("~/Content/css/awesome-bootstrap-checkbox.css")
.Include("~/Content/css/animate.css")
.Include("~/Content/css/SidewaysNav.css")
.Include("~/Content/css/site.css")
.Include("~/Content/css/pastel-colors.css")
);
BundleTable.EnableOptimizations = true;
bundles.FileSetOrderList.Clear();
}