Created
February 10, 2014 20:55
-
-
Save jdsteinbach/8923968 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1 class="page-title">Page Title</h1> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// 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) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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