SCSS media query aspect ratio not working

Question

im new to SCSS and im trying to maintain good quality of cover image of my site. Anyways, the css is working good, meanwhile the scss is not.

SCSS

#page-login-index {
@media screen and (min-aspect-ratio: 5/4) {
    background-color: red;
}}

CSS

@media screen and (min-aspect-ratio: 5/4) {
#page-login-index {
background-color: red;
}}

I need to do that in SCSS, since im loading some things from PHP. I've noticed that aspect-ratio and device-aspect-ratio is not working while min-height is working fine.

Answer 1

I figured it out.

when i wrote

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

scss compiled it to (min-aspect-ratio: 1.25) which was wrong

i had to put it as a string into variable like: $aspect54 : "(min-aspect-ratio: 5/4)";

so in the end it looked like this

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