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.

Answer: 
You could do something like:

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

```

The pattern is usually #{$name}, where $name is the name of the declared variable.
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](https://sass-lang.com/documentation/interpolation)

Improved

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

```