Sass变量在容器查询中无法工作。

Question

在容器查询中使用SCSS变量似乎不起作用。例如，这段代码可以正常工作：

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

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

查看笔记本电脑：https://codepen.io/pwkip/pen/jOprKya

但是当我尝试使用Sass变量来定义断点时，它失败了。

$width: 800px;

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

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

请查看代码笔：https://codepen.io/pwkip/pen/BaPzVZW

这里有什么问题？有什么解决方法吗？

- Jules Colle

Answer 1

我找不到明确的Sass语言条目，但哈希和花括号经常用于@media查询。

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

在 Brave 中，它可以在那个 CodePen 中工作；以下也是如此：

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

- A Boston

Answer 2

正如“波士顿”所指出的那样，问题似乎在于您没有像他的第一个示例中那样使用哈希语法。

我经常使用https://www.sassmeister.com/来检查它编译成什么。

在您的Codepen中，您忘记在之后添加分号了。

$width: 800px;
             ^

根据: https://developer.mozilla.org/en-US/docs/Web/CSS/@container @container 查询暂时还不支持在Firefox浏览器上。只有Firefox Nightly支持。

我已经在Chrome上测试过了，并通过调整使其正常工作。请确保您的浏览器版本得到支持。我的当前Safari版本也无法使用（由于版本不匹配）。

- F. Müller

---

Sassmeister.com非常有用。好建议。 - undefined