3

I would like get the device width and height in SASS. Because I want create function for convert vw / vh in pixel for ncompatible platforms.

I already write this function in LESS

@w_device:`$(window).width()/100`;
@h_device:`$(window).height()/100`;

.vh(@v){
    @val:round(@h_device*@v*1px);
}
.vw(@v){
    @val:round(@w_device*@v*1px);
}

Anyone have an idea how to do this in SASS ?

Thanks

Meco
  • 39
  • 1
  • 1
  • 3
  • 2
    What you have written above requires compiling LESS in the browser. In other words, using Less.js. This is only meant for development and not for production. Right now, SASS has no equivalent to Less.js (see http://stackoverflow.com/questions/4436643/is-there-a-sass-js-something-like-less-js). SASS *must* be precompiled. There is no way for SASS to know the `$(window).width()`, because when it's compiled, there is no `window`. – nabrown Aug 15 '15 at 22:08
  • Thank you for your response, I suspected something like this. Is there another way to recreate the behavior of V Units ? – Meco Aug 17 '15 at 09:08
  • Aside from setting `width` or `height` using percentages, no. Luckily, vw and vh have quite good support: http://caniuse.com/#feat=viewport-units, though vmin and vmax less so. – nabrown Aug 19 '15 at 11:30
  • Thanks, I have seen the compatibility but I want support for Android 4.x. I'll find another way to do it – Meco Aug 21 '15 at 23:29

1 Answers1

5

I think this is pretty close to what you are asking. 

@function get-vw($target) { 
  $vw-context: (1000*.01) * 1px;
  @return ($target/$vw-context) * 1vw;
}

Usage: 

h1 {
  font-size: get-vw(72px);
}

Since vw is 1% of the viewport we can scale the size in px as a ratio. The return value can be used for other elements. IE: images, backgrounds, etc.

Here is a great article discussing several Sass approaches.

Matt
  • 1,388
  • 15
  • 16