disable overwriting calc() in sass

Question

In SASS my Calculation looks like calc(50% - 375px); But when it compiles the CSS output looks like that: calc(-325%), which is obviously not what I had in mind.

How can I force SASS to not do the maths (50% - 375px)?

Thank you for your help!

Arenicolous

Can you show the complete code block where the issue occurs? You shouldn't get the outcome you're getting so something else isn't right. – Berget

You'll need string interpolation there height: calc(50% - #{375}) – Incriminate

@Mr.Alien I already tried string interpolation but it didn't worked. I also tried using variables instead, but nevertheless the compiled outcome was as mentioned. – Arenicolous

@Berget SASS: .test{ background: linear-gradient(to right, red 0px, white calc(50% - 375px), white calc(50% - 375px), white calc(50% + 375px), white calc(50% + 375px), red 100%);} -> CSS: .test{ background: linear-gradient(to right, red 0px, white calc(-325%), ...);} – Arenicolous

Answer 1

Use the SASS interpolation like this #{'calc(50% - 375px)'};

Bibi

This worked for me in a slightly different use-case: font-size: #{'min(max(2.4rem, 7vw), 4.5rem)'} to stop SASS from applying it's own min() and max() functions. Though, according to the docs it should not sass-lang.com/documentation/syntax/…. Probably depends on the compiler? – Karate

@Karate maybe compiler or compiler version – Bibi

Answer 2

Using the unquote function worked for me:

.selector { 
    height: unquote("calc(50% - 375px)"); 
}

Eutrophic

This did not work for me, still outputs the final calculated result – Illusionist

Answer 3

We still ran into compile issue using escaped strings, but using capitalized Min worked for us.

Ref: https://github.com/sass/sass/issues/2849#issuecomment-922070076

Fossiliferous

Answer 4

Use escaped string: ~"(50% - 375px)";

Regenerator

Error: Invalid CSS after " width:": expected expression (e.g. 1px, bold), was '~"(100% - 45px) / 5' in two separate compilers. Any ideas? – Aerial