Using @container with Sass variables

Question

I am trying to use the @container directive for breakpoints. It's working when I directly set the desired breakpoint like this:

@container (max-width: 992px) { // working
    span {
        background-color: green;
    }
}

However, when using variable for 992px it doesn't work. To asure that I used the variable correctly I added another style (max-height) which is working well.

max-height: $tablet; // results in max-height: 992px;

@container (max-width: $tablet) { // not working
    span {
        background-color: green;
    }
}

Answer 1

As Amaury pointed out in the comments, I had to use the following syntax for using the variable:

@container (max-width: #{$tablet}) {
    span {
        background-color: green;
    }
}