媒体查询中带有 SASS 变量的 CSS 模块答案

【问题标题】：CSS modules with SASS variables in media queries媒体查询中带有 SASS 变量的 CSS 模块
【发布时间】：2019-12-09 23:10:45
【问题描述】：

就我而言，我将 SASS 变量用于颜色、字体大小和媒体查询。我在自己的文件中创建了它们，然后导入到一个 index.scss 文件中。然后，当我需要在任何 .module.scss 中使用时，我只需在顶部导入：

@import 'src/constants/index.scss';

它对颜色、字体大小都很好......但是当出现媒体查询时，变量被忽略了。

作品：@media screen and (max-width: 740px)

不起作用：@media screen and (max-width: $small)

我什至像这样简化了它们：

$small: 740px;
$medium: 1024px;
$large: 1100px;

然后我在字体大小中应用了这些变量并且工作正常，它们只是在媒体查询中不起作用。

这是为什么呢？有什么帮助吗？

干杯！

【问题讨论】：

您需要 3.2 或更高版本，请查看：thesassway.com/intermediate/…
嗨@Katie，谢谢你的回答，但这篇文章似乎是 7 年前的，呵呵……而且我可以在这里看到，我的版本更高:)
否则，它应该可以正常工作，所以这是其他一些问题，尝试隔离代码并观察生成的 CSS。希望你能找到它！
嗨@Katie，只是想让你知道..经过几次测试后，问题显然出在变量“$medium”的名称上...... $small 和 $large 有效，当我改变时$test 的媒介它工作得很好。也许是一种保留字？还是与另一个变量或类发生冲突？我不知道..但至少找到了解决方案！
这也是我想知道的，如果可能有保留字，但粗略搜索后发现 SASS 网站上没有文档，但可能有隐藏的 :) 它真的是唯一的解释，因为如果它与另一个变量发生冲突，例如在框架中，您应该仍然能够在本地覆盖它。无论如何，很高兴你找到它！

【解决方案1】：

试试这个：

@media (max-width: $small) {
  //code
}

【讨论】：

你可以尝试使用断点 $small: 768px; //@include breakpoint(453px $small) { } 编译为： //@media (min-width: 453px) and (max-width: 768px) { }
问题是变量名，正如我在上面为 Katie 解释的那样。干杯！