Switch from vw to vh depending on orientation - mobile

Question

I have such function to calc from pixels to vw and it works perfectly for portrait orientation
#function get-vw($target) {
$vw-context: (320*.01) * 1px;
#return ($target/$vw-context) * 1vw;
}
But awful for landscape orientation. It's a pity but such function doesn't work
#function get-vw($target) {
$vw-context: (320*.01) * 1px;
#media only screen and (orientation: landscape) {
#return ($target/$vw-context) * 1vh;
}
#media only screen and (orientation: portrait) {
#return ($target/$vw-context) * 1vw;
}
}
Has anyone similar problem? How did you solve it?

Answer 1

In css (sass, less, no matter) you can't dynamically set the values. You should generates all properties for all conditions and all orientations in advance.
So #media blocks should be placed in element selector scope. And inside these #media's you should set sizes.
Sassmeister demo.
Sass:
// $target: number in pixels
// $orientation: string - portrait (default) | landscape
#function get-vw($target, $orientation: portrait) {
$vw-context: (320 * .01) * 1px;
$axis-unit: 1vw;
#if ($orientation == landscape) {
// Not shure about 240
$vw-context: (240 * .01) * 1px;
$axis-unit: 1vh;
}
#return ($target / $vw-context) * $axis-unit;
}
a {
#media only screen and (orientation: landscape) {
size: get-vw(12px, landscape);
}
#media only screen and (orientation: portrait) {
size: get-vw(12px);
}
}
Css:
#media only screen and (orientation: landscape) {
a {
size: 5vh;
}
}
#media only screen and (orientation: portrait) {
a {
size: 3.75vw;
}
}