Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist
View vw.less
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
// 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";
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.