SCSS媒体查询纵横比不工作

我是SCSS的新手，我试图保持我网站封面图像的良好质量。 无论如何，css工作得很好，而SCS却不是

SCSS

CSS

我需要在SCSS中这样做，因为我从PHP加载了一些东西。我注意到纵横比和设备纵横比不工作，而最小高度工作正常。

我找到了答案

当我写

    @media (min-aspect-ratio: 5/4) {
        background-image: url('someurl');
    }

scss将其编译为（最小纵横比：1.25），这是错误的

我必须将其作为字符串放入变量中，如： $aspect54:“（最小纵横比：5/4）”

所以最后看起来是这样的

$aspect54 : "(min-aspect-ratio: 5/4)";        
@media #{$aspect54} {
            background-image: url('someurl');
        }

---

在不转义的情况下放入

min aspect ratio:5/4

将失败，因为sass编译器将输出

min aspect ratio:1.25

将表达式置于引号中以避免编译：

---

最小纵横比：“5/4”

此

scss

代码的工作原理与我这边的

css

代码相同。你能分享更多的信息吗？在一个更少的文件中有同样的问题，在更少的文件中你也可以使用~“5/4”来转义字符，请看这篇文章：

    @media (min-aspect-ratio: 5/4) {
        background-image: url('someurl');
    }

$aspect54 : "(min-aspect-ratio: 5/4)";        
@media #{$aspect54} {
            background-image: url('someurl');
        }