Sass中@container指令使用变量失效问题咨询

直接使用具体像素值时，@container容器查询可以正常工作：

@container (max-width: 992px) { // 正常生效
    span {
        background-color: green;
    }
}

但替换为Sass变量后失效，而变量在普通CSS属性（如max-height）中能正常编译：

max-height: $tablet; // 编译结果为 max-height: 992px;

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

问题原因 #

Sass在处理容器查询（@container）的条件表达式时，不会自动解析变量值，而普通CSS属性中变量会被直接替换。

解决方案 #

在@container的条件中使用Sass插值语法#{$变量名}，强制将变量值输出到CSS中：

$tablet: 992px;

max-height: $tablet; // 正常编译

@container (max-width: #{$tablet}) { // 现在可正常生效
    span {
        background-color: green;
    }
}

插值语法会确保变量值被正确注入到容器查询的条件里，让浏览器能识别断点规则。

内容的提问来源于stack exchange，提问作者michi-p