Cacher is the code snippet organizer for pro developers

<h1 class="page-title">Page Title</h1>

.page-title {
  background: darkblue;
  color: white;
  width: 600px;
  width: 60rem;
  margin: 20px auto 40px;
  margin: 2rem auto 4rem;
  padding: 10px 20px 30px;
  padding: 1rem 2rem 3rem;
}

// ----
// Sass (v3.3.0.rc.3)
// Compass (v1.0.0.alpha.18)
// ----

@function strip-unit($num) {
  @if $num == auto or $num == inherit {
    @return $num;
  } @else {
    @return $num / ($num * 0 + 1);
  }
}
$font-size: 10px;
@mixin px-rem($property, $values...) {
  $max: length($values);
  $pxValues: '';
  $remValues: '';
  
  $base-font: strip-unit($font-size);
  
  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    
    @if $value == auto or $value == inherit or $value == 0 {
      $pxValues: #{$pxValues + $value};
    } @else {
      $pxValues: #{$pxValues + $value}px;
    }
      
    @if $i < $max {
      $pxValues: #{$pxValues + " "};
    }
  }
  
  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    @if $value == auto or $value == inherit or $value == 0 {
      $remValues: #{$remValues + $value};
    } @else {
      $remValues: #{$remValues + $value / $base-font}rem;
    }
    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  }
  
  #{$property}: $pxValues;
  #{$property}: $remValues;
}

.page-title {
  background: darkblue;
  color: white;
  @include px-rem(width,600);
  @include px-rem(margin,20,auto,40);
  @include px-rem(padding,10,20,30)
}

<h1 class="page-title">Page Title</h1>