3

I created a fresh copy of CRA, just to make sure it wasn't something custom in my code, I have nothing except one sass file, which the following code:

.test {
    top: calc((0% - (100% - 1.2em)) - 16%);
}

When I'm running development mode, the line show up correctly, however, when I run run build, I get this:

.test{
  top:calc(-116% - -1.2em)
}

Which is absolutely not what I want. I just want the contents of the calc() to stay intact, without it being evaluated. I have researched and it seems I need to use use interpolation, but I've tired that without any luck. Here is what I've tried so far:

top: #{'calc((0% - (100% - 1.2em)) - 16%)'};
top: calc#{'((0% - (100% - 1.2em)) - 16%)'};
top: calc((#{$zero} - #{$hMinus1}) - #{$sixteen});
top: unquote('#{calc((#{$zero} - (#{$oneH}- #{$onePTwo})) - #{$sixteen})}');

I have tired all kinds of ways to have it just ignore the line, but it keeps evaluating into some form of - - 1.2em as you see.

Is there any other way to make this work?

Amir
  • 4,211
  • 4
  • 23
  • 41

1 Answers1

0

In scss #{""} will insert the exact string into the output css.

This is similar to ~"" in less

scss

top: #{"calc((0% - (100% - 1.2em)) - 16%)"};

less

top: ~"calc((0% - (100% - 1.2em)) - 16%)";

output css

top: calc((0% - (100% - 1.2em)) - 16%);

Techlands
  • 21
  • 4