narekmal

The Function

Suppose we want a div to have 50px width when the screen width is 500px and a proportionate width when the screen width changes. We do math: (50/500)*100 = 10 and set width: 10vw. The following simple function helps make our intention more clear:

@function get-vw($valueAtWidth, $width) {
    @return $valueAtWidth*100vw/$width;
}

Usage: width: get-vw(50px, 500px);