<!DOCTYPE html>
<body>
<div class="frame"></div>
</body>
</html>.frame {
@mixin superVar($var, $number, $vh, $vw) {
@media (min-aspect-ratio: 2/1) {
$var: $number * $vh;
}
@media (max-aspect-ratio: 2/1) {
$var: $number * $vw;
}
}
@include superVar("--superVmin", 1, 2, 1);
width: calc(10 * var(--superVmin));
height: 10vmin;
background: red;
}
@mixin superVar($var, $number, $vh, $vw) {
@media (min-aspect-ratio: 2/1) {
#{$var}: $number * $vh;
}
@media (max-aspect-ratio: 2/1) {
#{$var}: $number * $vw;
}
}
.frame {
@include superVar(--superVmin, 1, 2vh, 1vw);
width: calc(10 * var(--superVmin));
height: 10vmin;
background: red;
}
Средний
Средний
Простой
