vw.less

// this snippet is valid LESS
// it uses vw units where available (http://caniuse.com/#search=vw)
// and falls back for predefined values for using media queries
// usage .vw(font-size, 5)	-> set font-size to at least 5% of the viewport
// 	 .vw(width, 20)		-> set width to at least 20% of the viewport


.vw(@prop, @value) {
	// this mixin is using a nasty hack due to less' inability
	// to define properties as arguments	
	@media (min-width: 1200px) {
		@pxvalue: @value*0.01*1200px;
		ignore: ~"inherit;@{prop}:@{pxvalue}";
		ignore: ~"inherit;@{prop}:@{value}vw";
	}
	@media (min-width: 979px) {
		@pxvalue: @value*0.01*979px;
		ignore: ~"inherit;@{prop}:@{pxvalue}";
		ignore: ~"inherit;@{prop}:@{value}vw";
	}
	@media (min-width: 767px) {
		@pxvalue: @value*0.01*767px;
		ignore: ~"inherit;@{prop}:@{pxvalue}";
		ignore: ~"inherit;@{prop}:@{value}vw";
	}
	@media (max-width: 767px) {
		@pxvalue: @value*0.01*500px;
		ignore: ~"inherit;@{prop}:@{pxvalue}";
		ignore: ~"inherit;@{prop}:@{value}vw";
	}
}