Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Sass function to convert pixels to ems

Tags:

sass

Take this function in Sass:

@function pem($pxval, $base: 16) {

         @return #{$pxval / $base}em ;
}

(source: https://gist.github.com/2237465)

pem(16) returns 1em and it's ok, but pem(16px) returns 1pxem.

how can this function accept both types of input?

thanks

like image 737
Trident Splash Avatar asked Dec 15 '22 20:12

Trident Splash


1 Answers

This seems like a good use for SASS's unitless() function.

@function pem($pxval, $base: 16) {
  @if (unitless($pxval)) {
    $pxval: $pxval * 1px;
  }

  @if (unitless($base)) {
    $base: $base * 1px;
  }

  @return $pxval / $base * 1em;
}
like image 154
hopper Avatar answered Jan 06 '23 15:01

hopper