SCSS变量在容器查询中失效的原因及解决办法

问题原因 #

SCSS作为预处理器，变量会在编译阶段完成解析替换。容器查询的CSS语法要求断点值必须是完整有效的CSS单位值，如果你定义的SCSS变量缺少单位（比如$width: 800;而非$width: 800px;），编译后会生成@container (min-width: 800)这种语法错误的代码，直接导致容器查询失效。

另外，部分旧版SCSS编译器对容器查询这类较新的CSS特性支持不足，即便变量带单位，也可能无法正确完成容器查询条件内的变量替换，最终生成不符合规范的CSS代码。

可行解决办法 #

• 给SCSS变量添加完整单位：定义变量时务必带上CSS单位，比如$container-width: 800px;，编译后会生成合法的@container (min-width: 800px)语法，容器查询即可正常运行。
• 改用CSS原生自定义属性：CSS变量（--*）是运行时生效的，完全兼容容器查询语法。先在容器元素上定义--container-breakpoint: 800px;，再在容器查询中使用@container (min-width: var(--container-breakpoint))，能彻底避免预编译阶段的兼容性问题。
• 升级SCSS编译器：如果是编译器版本过低导致的支持问题，升级到最新版的Dart Sass（官方推荐的SCSS实现），它对CSS新特性的适配更完善，能正确处理容器查询中的SCSS变量替换。

示例代码 #

正确的SCSS变量用法

$container-breakpoint: 800px;

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

@container (min-width: $container-breakpoint) {
  .child-element {
    background-color: #ff4444;
  }
}

CSS原生变量用法

.parent-container {
  container-type: inline-size;
  --container-breakpoint: 800px;
}

@container (min-width: var(--container-breakpoint)) {
  .child-element {
    background-color: #ff4444;
  }
}

内容的提问来源于stack exchange，提问作者Jules Colle