SASS css 中带有@media 的变量不起作用

Question

variables.scss:

$large-screen: 1200px;
$screen-large: #{($large-screen - 1)};
$large-down: 'screen and (max-width: #{$screen-large})';
@debug $screen-large;

在另一个 scss 文件中：

@import '../../styles/variables.scss';
@media #{$large-down} {
    my styling…
}

问题：它没有应用“我的样式”部分。
如果我用 @media only screen and (max-width: 1199px) { 替换 @media 行，它确实有效。
知道我做错了什么吗？

更新： 我发现 $screen-large: #{($large-screen - 1)}; 结果是 "1200px - 1" 而不是 "1199px"。 SASS 中有没有办法让它进行计算而不是将其作为字符串？

我试过 $screen-large: calc($large-screen - 1); 但它仍然 returns 将整行作为字符串而不是进行计算。

Answer 1

找到解决方案：

variables.scss:

$large-screen: 1200px;
$screen-large: ($large-screen - 1);  // Now it no longer interpolates to a string.
$large-down: 'screen and (max-width: #{$screen-large})';

在另一个 scss 文件中：

@import '../../styles/variables.scss';
@media #{$large-down} {
    my styling…
}