alisonailea/PX-to-REM-conversion.markdown

## index.html
<html>
  <head>
    <title>Example: px2rem</title>
  </head>
  <body>
    <h2>This is in rems but it's also  20px.</h2>
  </body>
</html>

## PX-to-REM-conversion.markdown

      
    Raw
  

              PX-to-REM-conversion.markdown
            
          
    PX to REM conversion

Created to allow teams to easily use the superior rem unit of measurement without losing time in
translation between px and rem or force Design teams to learn rems.
Credit for the calculation (round($val) / $base;) goes to
Edward Irby(https://github.com/EdwardIrby/ephemeralXYZ/blob/master/app/src/utils/_util.scss)
Thanks to Offroad Code for the original REM calculator I used which inspired me to create this.
https://offroadcode.com/prototypes/rem-calculator/
A Pen by Alison on CodePen.
License.

  
## style.scss
@import "bourbon";
@function parseInt($n) {
  $int: $n * 0 + 1;
  @return $n / $int;
}

@function remCalculator($pixelValue){
    $font-unit: 0rem;
    // strip px from values
    $pixelValue: round(parseInt($pixelValue));
    $baseFontValue: parseInt($font-size-base);
    // calculate rem value in comparison to base fontsize
    $remCalc: $pixelValue / $baseFontValue;

  @return $remCalc + $font-unit;
}

// USAGE
$font-size-base: 16px;
html, body {
  font-size: $font-size-base;
}
h2 {
  font-size: px2rem(20px);
}
	<html>
	<head>
	<title>Example: px2rem</title>
	</head>
	<body>
	<h2>This is in rems but it's also 20px.</h2>
	</body>
	</html>
	@import "bourbon";
	@function parseInt($n) {
	$int: $n * 0 + 1;
	@return $n / $int;
	}

	@function remCalculator($pixelValue){
	$font-unit: 0rem;
	// strip px from values
	$pixelValue: round(parseInt($pixelValue));
	$baseFontValue: parseInt($font-size-base);
	// calculate rem value in comparison to base fontsize
	$remCalc: $pixelValue / $baseFontValue;

	@return $remCalc + $font-unit;
	}

	// USAGE
	$font-size-base: 16px;
	html, body {
	font-size: $font-size-base;
	}
	h2 {
	font-size: px2rem(20px);
	}