将 @container 与 Sass 变量一起使用

Question

我正在尝试使用 @container 指令作为断点。当我直接设置所需的断点时，它就可以工作：

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

但是，当使用变量时992px它不起作用。为了确保我正确使用该变量，我添加了另一种max-height运行良好的样式 ( )。

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

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

Answer 1

正如 Amaury 在评论中指出的那样，我必须使用以下语法来使用变量：

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