The new responsive — Viewport units

Viewport units

Usage

A use case

The calculation

(Initial size * 100) / Query width

Preprocessors to the rescue

.viewport(@property, @initialsize, @maxwidth, @unit:vw) {
@{property}: unit((@initialsize*100)/@maxwidth, @unit);
}
=viewport($property, $initialsize, $maxwidth, $unit:vw)
#{$property}: ($initialsize*100)/$maxwidth#{$unit}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store