Generated by SassMeister.com.

SassMeister-input-HTML.html

px(16em)  

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----

// ____________________________________________________________________________
//
//    Unit Conversion v.2.0 
// ____________________________________________________________________________
//
//   Function               Input units    
//     
//   Absolute length      
//   px(input);             px, pt, pc, in, mm, cm, em, rem, number
//   pt(input);             px, pt, pc, in, mm, cm, em, rem, number
//   pc(input);             px, pt, pc, in, mm, cm, em, rem, number
//   in(input);             px, pt, pc, in, mm, cm, em, rem, number
//   mm(input);             px, pt, pc, in, mm, cm, em, rem, number
//   cm(input);             px, pt, pc, in, mm, cm, em, rem, number
//
//   Relative length 
//   em(input);             px, pt, pc, in, mm, cm, em, rem, number
//   rem(input);            px, pt, pc, in, mm, cm, em, rem, number
//   ex(input);             ex, number  
//   ch(input);             ch, number
//   vw(input);             vw, number
//   vh(input);             vh, number
//   vmin(input);           vmin, number  
//   vmax(input);           vmax, number
//
//   Angle
//   deg(input);            deg, rad, grad, turn, number
//   rad(input);            deg, rad, grad, turn, number
//   grad(input);           deg, rad, grad, turn, number
//   turn(input);           deg, rad, grad, turn, number
//
//   Resolution
//   dpi(input);            dpi, dpcm, dppx, number
//   dpcm(input);           dpi, dpcm, dppx, number
//   dppx(input);           dpi, dpcm, dppx, number
//
//   Time
//   s(input);              s, ms, number
//   ms(input);             s, ms, number
//
//   Frequency
//   hz(input);             hz, khz, number
//   khz(input);            hz, khz, number
//  
//   String
//   str(input);            anything not null
//
//   Number, int and uint
//   num(input);            px, pt, pc, in, mm, cm, em, rem, ex, ch,
//                          vw, vh, vmin, vmax, deg, rad, grad, turn,
//                          dpi, dpcm, dppx, s, ms, hz, khz, number
//   int(input);            as number
//   uint(input);           as number
//
//   Aliases
//   string(input);
//   number(input);
//
// ____________________________________________________________________________

// Base font size in pixel for converting em and tem to absolute lengths.
$base-font-size: 16px !default;	 

// Allow string to be cast as unit (experimental – handle with care)
$cast-string-to-unit: true !default;
    
// Absolute lengths
@function px($input){ @return convert(px, $input); }
@function pt($input){ @return convert(pt, $input); }
@function pc($input){ @return convert(pc, $input); }
@function in($input){ @return convert(in, $input); }
@function mm($input){ @return convert(mm, $input); }
@function cm($input){ @return convert(cm, $input); }

// Angles
@function deg($input){ @return convert(deg, $input); }
@function rad($input){ @return convert(rad, $input); }
@function grad($input){ @return convert(grad, $input); }
@function turn($input){ @return convert(turn, $input); }

// Resolution
@function dpi($input){ @return convert(dpi, $input); }
@function dpcm($input){ @return convert(dpcm, $input); }
@function dppx($input){ @return convert(dppx, $input); }

// Time
@function ms($input){ @return convert(ms, $input); }
@function s($input){ @return convert(s, $input); }

// Frequencies
@function hz($input){ @return convert(hz, $input);}
@function khz($input){ @return convert(khz, $input); }

// Relative lengths
@function em($input...){
  $em: convert(em, nth($input,1));
  // Adjust for compounds (visual size)
  @if length($input) > 1 { 
    @for $i from 2 through length($input){ 
      $em: $em / num(em(nth($input,$i))); 
    } 
  }
  @return $em;
}
@function rem($input){ @return convert(rem, num(em($input))); }

// Inconvertible relative lengths – depends on font 
@function ex($input){ @return convert(ex, $input); }
@function ch($input){ @return convert(ch, $input); }

// Viewport
@function vw($input){ @return convert(vw, $input); }
@function vh($input){ @return convert(vh, $input); }
@function vmin($input){ @return convert(vmin, $input); }
@function vmax($input){ @return convert(vmax, $input); }

// Strings and numbers
@function str($input){ @return #{$input};  }		
@function num($input){
  @if type-of($input) != number {
    @error 'Could not convert `#{$input}` - must be `type-of number`';
    @return null; 
  }
  @return $input/($input*0+1); 
}
@function int($input){ 
  $num: num($input);
  @return if($num<0, ceil($num), floor($num));
}
@function uint($input){ @return abs(int($input)); }


// Conversion function
@function convert($unit, $input){
  @if type-of($input) == string and $cast-string-to-unit {
    $input: cast-to-unit($input);        
  } 
  // Test against valid CSS units
  $convert-unit: map-get((
    px: 0px, pt: 0pt, pc: 0pc, in: 0in, mm: 0mm, cm: 0cm, // absolute length
    em: 0em, rem: 0rem, ch: 0ch, ex: 0ex,                 // relative length - font based
    vw: 0vw, vh: 0vh, vmin: 0vmin, vmax: 0vmax,           // relative length - viewport based
    deg: 0deg, turn: 0turn, grad: 0grad, rad: 0rad,       // angle
    s: 0s, ms: 0ms,                                       // time
    hz: 0Hz, khz: 0kHz,                                   // frequency
    dpi: 0dpi, dpcm: 0dpcm, dppx: 0dppx,                  // resolution
    pct: 0%, percent: 0%, num: 0, number: 0               // percent or number  
  ), $unit);
  
  // Error handling – wrong $unit 
  // Incomparable units are caught in convertion 
  @if not $convert-unit {
    @error 'Could not convert to `#{$unit}` – must be a valid CSS unit';
    @return null; 
  }  

  // Number/incomparable conversion
  @if index(num number ex ch vw vh vmin vmax, $unit) {
    $value: num($input);
  }
  
  // EM/REM convertion using px as base
  @if index(em rem, unit($input)) {
    $input: 0px + num($input) * $base-font-size/1px; 
  } 
  @if index(em rem, $unit) and not unitless($input) {
    $input: 0px + $input;                
    $input: num($input) * 1px/$base-font-size; 
  } 
  
  // Convert 
  @return $convert-unit + $input;
}
         

           
// Aliases
@function string($input){ @return str($input);}
@function number($input){ @return num($input);}
     
           

           
// Cast to unit            
@function cast-to-unit($input){
  // Validate input type (note! no unit validation) 
  @if not index('string' 'number',type-of($input)) { // wrong type   
    @error 'Unable to cast `#{type-of($input)}`.';   // throw warning  
    @return null;
  }
  @if type-of($input) == number { @return $input; }  // no need to cast
  
  // Cast string to unit
  $number-chars: '0' '1' '2' '3' '4' '5' '6' '8' '9';
  $number:  0;     // return value
  $devider: 0;     // devider used to set decimals  
  $decimal: false; // flag to mark decimal place  
  $unit   : '';    // unit
  @for $i from 1 through str-length($input) {        // loop through string
    $char:str-slice($input, $i, $i);                 // current charcater
    $index:index($number-chars , $char);             // is character a number
    $decimal:if($char=='.', true,  $decimal);        // mark first decimal
    @if $index {                                     // if character is a number  
      $devider:if($decimal ,$devider + 1, $devider); // increment devider if we have a decimal flag
      $number: $number * 10 + $index - 1;            // add number part ($index - 1 is the new part)
    }
    @else if(not index(' ' '-' '+' '.', $char)){     // if character is not a number, ' ',-, + or .
      $unit:$unit + $char;                           // add character to unit
    } 
  }
  // Format value  
  $number:if(str-index($input, '-'), $number * -1, $number);// negative value
  $number:$number / pow(10, $devider);                      // add decimals   
  
  @return convert(if($unit == '', num, $unit), $number);
}           
 



// ____________________________________________________________________________
// 
//  Test
// ____________________________________________________________________________


SCSS {
  px-to-px : px(16px);
  pt-to-px : px(16pt);
  pc-to-px : px(16pc);
  in-to-px : px(16in);
  mm-to-px : px(16mm);
  cm-to-px : px(16cm);
  em-to-px : px(2em);
  rem-to-px: px(1rem);
  num-to-px: px(16);
  str-to-px: px("2em") + px("12pt");
}

SassMeister-output.css

SCSS {
  px-to-px: 16px;
  pt-to-px: 21.33333px;
  pc-to-px: 256px;
  in-to-px: 1536px;
  mm-to-px: 60.47244px;
  cm-to-px: 604.72441px;
  em-to-px: 32px;
  rem-to-px: 16px;
  num-to-px: 16px;
  str-to-px: 48px;
}

SassMeister-rendered.html

px(16em)