sass variable not working in container query

SCSS variables don't seem to work when used in a container query. For example this code works just fine:

.parent {
  container-type: inline-size;
  background: yellow;
}

@container (max-width: 800px) {
  .child {
      background:green;
  }
}

See pen: https://codepen.io/pwkip/pen/jOprKya

But when I try to use a sass-variable to define the breakpoint, it fails.

$width: 800px;

.parent {
  container-type: inline-size;
  background: yellow;
}

@container (max-width: $width) {
  .child {
      background:green;
  }
}

See pen: https://codepen.io/pwkip/pen/BaPzVZW

What's the problem here? Any workaround?

I cannot find the definitive sass lang entry, but hash and curly brace is often used in @media queries.

@container (max-width: #{$width}) {
  .child {
      background:green;
  }
}

In Brave it works in that codepen; and so do the following:

@container (max-width: ${width} ) {