Спасибо, получилось сделать так
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div></div>
</body>
<style>
@media (min-aspect-ratio: 2/1) {
div {
--superVmin: 2vh;
}
}
@media (max-aspect-ratio: 2/1) {
div {
--superVmin: 1vw;
}
}
div {
width: calc(10 * var(--superVmin));
height: calc(10 * var(--superVmin));
background: red;
}
</style>
</html>
Но почему scss-миксин не компилируется к примеру
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div></div>
</body>
<style lang="scss">
@mixin superVar($var, $number, $vh, $vw) {
@media (min-aspect-ratio: 2/1) {
$var: $number * $vh;
}
@media (max-aspect-ratio: 2/1) {
$var: $number * $vw;
}
}
div {
@include superVar(--superVmin, 1, 2vh, 1vw);
width: calc(10 * var(--superVmin));
height: calc(10 * var(--superVmin));
background: red;
}
/*
//компилируется только в
div {
width: calc(10 * var(--superVmin));
height: 10vmin;
background: red;
}
//а миксин игнорируется
*/
<style>
</html>