Need your Help for SCSS if condition <greater than operation>

Question

I am getting compilation error while trying to compile below SASS code : Could you please help me to solve the problem please ?

@mixin high {
   @if (calc(100% * 1.3333 + 0px) > 900px) {
     min-height: auto !important;
   }
  @else {
    min-height: 100% !important;
  }
}

.main-content {
  .container-fluid {
    @include high;
  }
}

Answer 1

The function calc() is a css function which will be executed in the browser direct, - not in SASS.

You can write this expression to sass but it will be interpreted as 'code to write to css' so css can execute it in browser but not not to execute it in sass direct.

So the reason for your error is:

You try to use calc() as function in an @if directive using to compare if the expected result is greater than a value. But as SASS does not execute calc() it understands that as an not allowed operation.

EXPLAINING Example:

// SASS
   border-radius: calc(1px + 1px);

// --> will become in css
  border-radius: calc(1px + 1px);

// but not
   border-radius: 2px;

See: https://sass-lang.com/documentation/syntax/special-functions#calc-clamp-element-progid-and-expression