Dynamic (linearly) property value by the viewport width

// Defines a property value to change linearly // from @px1_in at viewport @vp1_in // to @px2_in at viewport @vp2_in. // All values are in px. // // E.g.: #m5 {.responsive_px(padding-bottom, 66, 365, 24, 767);} // // @px1_in - value (in px) at viewport @vp1_in (in px). // @px2_in - value (in px) at viewport @vp2_in (in px). .responsive_px(@property, @px1_in, @vp1_in, @px2_in, @vp2_in) { // Remove the units, so they do not interfere with the calculations or the desired result. @px1: unit(@px1_in); @px2: unit(@px2_in); @vp1: unit(@vp1_in); @vp2: unit(@vp2_in); @k: (@px2 - @px1) / (@vp2 - @vp1); @kperc: round(@k * 100, 1); @b: round(@px1 - @k * @vp1); @{property}: calc(~'@{b}px + @{kperc}vw'); }