Css calc() function not working with sass file

Question

Problem :

• Correct use of calc function with sass file.

Case :

.class1  {
      max-width: calc(100% - #{$endWidth});
      min-width: $startWidth;
      text-overflow: ellipsis;
    }

.class2 {
      max-width: calc(100% - #{$startWidth});
      direction: rtl;
    }

Tried Case :

• I have verified few answers in stack overflow, and from one of the question answers inspired my question - Stack Overflow Reference. The solutions aren't working for my scenario,

• Should I use mixin in sass to get it to work ?

Answer 1

While calc() will indeed cause issues with SASS files by default, this can be avoided by using interpolation (which you are using correctly).

The only possible explanation(s) for your issue are:

• You do not have (or have it incorrectly defined) SASS variables:$startWidth and $endWidth
• Rules with higher specificity are overriding your selectors
• You have cached old styles, hence clear your cache with CTRL + SHIFT + R

Here's an example JSFiddle showcasing your above code working.