CODEWITHSUNDEEP
csssass
Meco
Meco

Reputation: 39

Get device size in SASS

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

Upvotes: 3

Views: 18396

Answers (1)

Matt
Matt

Reputation: 1558

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.

Upvotes: 6

Related Questions