Skip to content

Commit

Permalink
Added rem to px conversion
Browse files Browse the repository at this point in the history
  • Loading branch information
Pierre Burel committed Jan 30, 2015
1 parent 5b8396f commit 129e1bb
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 18 deletions.
10 changes: 5 additions & 5 deletions README.md
Expand Up @@ -35,7 +35,7 @@ Import `_rem.scss`, set the html font-size to 62.5% (depending of `$rem-baseline
text-shadow: rem(1px 1px #eee, -1px -1px #eee); // Function and multiple values, warning: no fallback possible with rem function
// Map support (Sass 3.3+)
@include rem((
margin: 20px 0,
margin: 20px 1rem,
padding: 10px
));
}
Expand All @@ -54,8 +54,8 @@ That will output :
box-shadow: 0 0 2px #ccc, inset 0 0 5px #eee;
box-shadow: 0 0 0.2rem #ccc, inset 0 0 0.5rem #eee;
text-shadow: 0.1rem 0.1rem #eee, -0.1rem -0.1rem #eee; // No fallback
margin: 20px 0;
margin: 2rem 0;
margin: 20px 10px;
margin: 2rem 1rem;
padding: 10px;
padding: 1rem;
}
Expand All @@ -67,7 +67,7 @@ You can disable pixel fallback by setting `$rem-fallback` to `false` :
border-bottom: 0.1rem solid black;
box-shadow: 0 0 0.2rem #ccc, inset 0 0 0.5rem #eee;
text-shadow: 0.1rem 0.1rem #eee, -0.1rem -0.1rem #eee;
margin: 2rem 0;
margin: 2rem 1rem;
padding: 1rem;
}

Expand All @@ -78,6 +78,6 @@ You can totally disable rem units by setting `$rem-px-only` to `true` (lt-ie9 on
border-bottom: 1px solid black;
box-shadow: 0 0 2px #ccc, inset 0 0 5px #eee;
text-shadow: 1px 1px #eee, -1px -1px #eee; // Fallback works here
margin: 20px 0;
margin: 20px 10px;
padding: 10px;
}
31 changes: 19 additions & 12 deletions _rem.scss
Expand Up @@ -16,22 +16,29 @@ $rem-px-only: false !default;
@return if($test-list == $list, space, comma);
}

@function rem($values...) {
@if $rem-px-only {
@return $values;
}
$rem: ();
@function rem-convert($to, $values...) {
$result: ();
$separator: rem-separator($values);
@each $value in $values {
@if type-of($value) == "number" and unit($value) == "px" {
$rem: append($rem, $value / ($rem-baseline / 1rem), $separator);
@if type-of($value) == "number" and unit($value) == "rem" and $to == "px" {
$result: append($result, $value / 1rem * $rem-baseline, $separator);
} @else if type-of($value) == "number" and unit($value) == "px" and $to == "rem" {
$result: append($result, $value / ($rem-baseline / 1rem), $separator);
} @else if type-of($value) == "list" {
$rem: append($rem, rem($value...), $separator);
$result: append($result, rem-convert($to, $value...), $separator);
} @else {
$rem: append($rem, $value, $separator);
$result: append($result, $value, $separator);
}
}
@return $rem;
@return $result;
}

@function rem($values...) {
@if $rem-px-only {
@return rem-convert(px, $values...);
} @else {
@return rem-convert(rem, $values...);
}
}

@mixin rem($properties, $values...) {
Expand All @@ -42,10 +49,10 @@ $rem-px-only: false !default;
} @else {
@each $property in $properties {
@if $rem-fallback or $rem-px-only {
#{$property}: $values;
#{$property}: rem-convert(px, $values...);
}
@if not $rem-px-only {
#{$property}: rem($values...);
#{$property}: rem-convert(rem, $values...);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion bower.json
@@ -1,7 +1,7 @@
{
"name": "sass-rem",
"description": "Sass mixin and function to use rem units with pixel fallback.",
"version": "1.0.0",
"version": "1.1.0",
"homepage": "https://github.com/pierreburel/sass-rem",
"main": "_rem.scss",
"authors": [
Expand Down

0 comments on commit 129e1bb

Please sign in to comment.