[SOLVED] Intellij does not support sass variables inside a CSS3 calc( function

Intellij does not support sass variables inside a CSS3 calc( function

I have the following sass code in a .scss file which works perfectly.

$headerHeight: 90px;

.basePageContent {
  height: calc(100% - $headerHeight);
  width: 100%;
  position: absolute;
  top: $headerHeight;
  bottom: 0;
  display: block;
}

But Intellij shows it as invalid code. Could this be an invalid setting on my IDE or is Intellij wrong?

I am on the following build

IntelliJ IDEA 2017.3 (Ultimate Edition) Build #IU-173.3727.127, built on November 27, 2017 JRE: 1.8.0_152-release-1024-b6 x86_64 JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o Mac OS X 10.13.1

Solution

IDE works fine. Read about interpolation.

$headerHeight: 90px;

.basePageContent {
  height: calc(100% - #{$headerHeight});
  width: 100%;
  position: absolute;
  top: $headerHeight;
  bottom: 0;
  display: block;
}