Skip to content

Instantly share code, notes, and snippets.

@jdsteinbach
Created February 10, 2014 20:55
Show Gist options
  • Save jdsteinbach/8923968 to your computer and use it in GitHub Desktop.
Save jdsteinbach/8923968 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<h1 class="page-title">Page Title</h1>
// ----
// 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)
}
.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;
}
<h1 class="page-title">Page Title</h1>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment