Libsass: Whitespaces in calc function

[garthenweb]

The complier removes whitespaces from the css calc function.

body {
  width: calc(100% - 3em);
}

outputs

body {
  width: calc(100%-3em);
}

This CSS-Syntax failes in Chrome and Firefox (did not test in other vendors).

[chriseppstein]

Ruby Sass preserves the whitespace around operators.

[JasonGhent]

The whitespaces are missing in node-sass when compiling scss files. Perhaps the issue is there if this is working with Ruby Sass properly?
Can anyone confirm that Ruby Sass is working properly?

[garthenweb]

Tested it with the ruby sass command line tool on windows and the online testing tool, both return:

body {
  width: calc(100% - 3em); }

So they are working properly!

[msokk]

I have the same issue with node-sass, does anybody know a workaround?

[declantraynor]

I'm using the sassc command-line tool and ran into this same issue. While its no fix, a workaround is to use 'unquote' when writing your calc expression in SASS:

body {
  width: calc(unquote("100% - 3em"));
}

[zakdances]

Are you still experiencing this issue?

[JasonGhent]

I am not. I found a workaround to do the same thing that I wanted to with a different CSS style.
For any that are interested in using calc to place a static footer that extends with content to never place higher than the bottom of the viewport, I used this example.

[togakangaroo]

Did this end up getting fixed?

[akhleung]

I re-implemented the parsing for the calc function, so the whitespace should be preserved now.

[kvakes]

@akhleung can you reference the commit where it was fixed, please? It is not included in 1.0.1 release, correct?

[akhleung]

Looks like this one: aa92df14a5778aaec132299f77baf0d8c8c849b0

I think the latest release tag was made before this commit.

[kvakes]

@akhleung We have a hotfix for it using unquote(), so we're good for now, but is there a hash that we can upgrade to to fix this? Are you guys planning to roll out a new release soon? Do you need any help?

[akhleung]

I would recommend using the latest master, as it contains numerous fixes that were done over the past couple of months. As for releases, we've been doing this in an ad-hoc manner because we're still catching up with the Ruby implementation, so there are currently no plans for declaring a new release. If you have an opinion on the topic, please contribute to the discussion in #282!

[valentinvoilean]

Hello. I'm using gulp-sass 2.1.1 and I'm facing issues with the calc function and the "+" operator:
This min-width: calc(100% + 5em) becomes this min-width: calc(100%+5em)

I tried these without any luck:
min-width: calc(#{unquote("100% + 5em")});
min-width: #{unquote("calc(100% + 5em)")};

[MusicalCreeper01]

This is now an issues when using gradiants, e.g:

$background-moz: -moz-radial-gradient(center, ellipse cover,  #333760 0%, #1f2038 0%, #151925 100%); /* FF3.6-15 */
$background-webkit: -webkit-radial-gradient(center, ellipse cover,  #333760 0%,#1f2038 0%,#151925 100%); /* Chrome10-25,Safari5.1-6 */
$background-others: radial-gradient(ellipse at center,  #333760 0%,#1f2038 0%,#151925 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
$background-ie: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333760', endColorstr='#151925',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

The spaces for things like eclipse at center and #151925 100% are removed. Using unquote does not seems to fix this either.

[sebastianschnock]

I can confirm that it breaks when using calc in gradiants. Can this be reopened?

[xzyfer]

@sebastianschnock please create a new issue with a reproduction case

[xkisu]

@xzyfer Wouldn't it be better to just re-open this ticket which already has all the relevant information and examples of the issue?

[xzyfer]

Calc support has landed.

I can confirm that it breaks when using calc in gradiants

@sebastianschnock issue is about a specific case