Invalid property in scss file

Question

in an scss file aks-file-name.scss I am using below code to put css property on some component in react

$header-height-value: 70px;

.body {
  box-sizing: border-box;
  height: calc(100% - $header-height-value);
}

It gives an error in the dev tools cs invalid property in line height: calc(100% - $header-height-value);

and property not applied to the element. If I use the below code it perfectly works

.body {
  box-sizing: border-box;
  height: calc(100% - 70px);
}

how to fix this and make it work in a first way because putting random 70px in the code is not a good idea for the future.

Is this the first time in this particular project that you use .scss files? do you have webpack configured already? — Mario Perez, Oct 25 '20 at 05:02

score 3 · Accepted Answer · answered Oct 25 '20 at 05:03

3

You could do something like:

height: calc(100% - #{$header-height-value})

The pattern is usually #{$name}, where $name is the name of the declared variable.

answered Oct 25 '20 at 05:03

nishkaush

1,512
1
13
20

it works, but why we have to use inside {} with #, not directly $header-height-value – Asis Oct 25 '20 at 05:07
1

It's helps SCSS know to handle with calc, like an alternative syntax. you can read more on it here - `https://sass-lang.com/documentation/syntax/special-functions#calc-element-progid-and-expression` – nishkaush Oct 25 '20 at 05:09
after 3 minutes – Asis Oct 25 '20 at 05:11

score 0 · Answer 2 · answered Oct 25 '20 at 05:25

It's the concept of Sass interpolation

Interpolation can be used almost anywhere in a Sass stylesheet to embed the result of a SassScript expression into a chunk of CSS. Just wrap an expression in #{} in any of the following places:

@mixin inline-animation($duration) {
  $name: inline-#{unique-id()};

  @keyframes #{$name} {
    @content;
  }

  animation-name: $name;
  animation-duration: $duration;
  animation-iteration-count: infinite;
}

.pulse {
  @include inline-animation(2s) {
    from { background-color: yellow }
    to { background-color: red }
  }
}

Interpolation is useful for injecting values into strings, but other than that it’s rarely necessary in SassScript expressions. You definitely don’t need it to just use a variable in a property value. Instead of writing color: #{$accent}, you can just write color: $accent!

For clarification and better understanding, refer to the official Interplation of sass

Improved

calc(100% - #{$header-height-value})

Invalid property in scss file

2 Answers2