Create aspect-ratio SCSS mixin polyfill

[lucasvallenet]

Create an aspect-ratio mixins with a fallback for unsupported browsers.

Is it relevant considering the current support ? I dont know :)

[cloudflare-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	12d65db
Status:	✅  Deploy successful!
Preview URL:	https://adde1d33.locomotive-boilerplate.pages.dev
Branch Preview URL:	https://feature-sass-aspect-ratio.locomotive-boilerplate.pages.dev

View logs

[butterfail]

Hello @lucasvallenet @mcaskill,

I've noticed a potential issue in the implementation of the aspect-ratio mixin. The @supports not (aspect-ratio: 1) and @supports (aspect-ratio: 1) directives appear to be reversed. As it stands, the code applies styles intended for browsers that do not support the aspect-ratio property in cases where it is actually supported, and vice versa.

Here is the concerned part:

@supports not (aspect-ratio: 1) {
    aspect-ratio: $ratio;
}

@supports (aspect-ratio: 1) {
   height: 0;
   padding-top: calc(#{$width} * #{math.div(1, $ratio)});
   [...]
}

I suggest reversing these two blocks to ensure that the appropriate styles are applied based on whether the browser supports the aspect-ratio property or not.

@supports (aspect-ratio: 1) {
    aspect-ratio: $ratio;
}

@supports not (aspect-ratio: 1) {
   height: 0;
   padding-top: calc(#{$width} * #{math.div(1, $ratio)});
   [...]
}

[lucasvallenet]

Hello @GregoireCiles,

You are right, it is now fixed Thank you!