1

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();
    }
jjr2000
  • 547
  • 8
  • 20
  • See https://stackoverflow.com/questions/11972084 – seven-phases-max Nov 17 '17 at 01:31
  • As for removed whitespace, [it's not Less doing this](http://less2css.org/#%7B%22less%22%3A%22div%20%7B%5Cn%5Cta%3A%20calc(~%5C%22(100%25)%20-%2020px%5C%22)%3B%5Cn%20%20%5Ctb%3A%20calc(~%5C%22(100%25)%20%2B%2020px%5C%22)%3B%5Cn%7D%22%7D) (but most likely some css-minifier sitting after Less). Less itself should never touch anything inside `~""` (see [the definition](http://lesscss.org/features/#features-overview-feature-escaping)) except certain specific markers. – seven-phases-max Nov 17 '17 at 01:39
  • @seven-phases-max Thanks for pointing this out, I've updated my question to help point it more towards the bundling and minification side of things – jjr2000 Nov 17 '17 at 07:57

0 Answers0