Cacher is the code snippet organizer for pro developers

// Set base font size variable
$font-size: 10px; // can be anything

// Function that strips units from numbers
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

// SCSS Mixin (requires $font-size to be set)
@mixin rem-size($value, $property: font-size) {
  $pxValue: strip-unit($value);
  $baseValue: strip-unit($font-size);
  $remValue: ($pxValue / $baseValue);
  #{$property}: $value; 
  #{$property}: $remValue + rem;
}


// Set relative font-size to root element
body {
  font-size: $font-size;
}

// Actually use the mixin
p {
  @include rem-size(20px);
}

// exports out to 
// p {
//  font-size: 20px;
//  font-size: 2rem;
// }


/////  Alternative Use  /////
div {
  @include rem-size(600px, 'width');
}

// exports out to 
// div {
//  width: 600px;
//  width: 60rem;
// }

// Set base font size variable
@font-size: 10px; // can be anything

// LESS Mixin (requires @font-size to be set)
.rem-size(@value, @property: font-size) {
  @pxValue: unit(@value);
  @baseValue: unit(@font-size);
  @remValue: (@pxValue / @baseValue);
  @{property}: @value; 
  @{property}: unit(@remValue,rem);
}

// Set relative font-size to root element
body {
  font-size: @font-size;
}

// Actually use the mixin
p {
  .rem-size(20px);
}

// exports out to 
// p {
//  font-size: 20px;
//  font-size: 2rem;
// }


/////  Alternative Use  /////
div {
  .rem-size(600px, 'width');
}

// exports out to 
// div {
//  width: 600px;
//  width: 60rem;
// }