Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
  • 3 commits
  • 2 files changed
  • 0 commit comments
  • 1 contributor
Showing with 8 additions and 63 deletions.
  1. +0 −55 stylesheets/_rem.sass
  2. +8 −8 stylesheets/_rem.scss
View
55 stylesheets/_rem.sass
@@ -1,55 +0,0 @@
-// Base font size in pixels, if not already defined.
-// Should be the same as the font-size of the html element.
-$base-font-size: 16px !default
-$print-rem-px-fallbacks: true !default
-
-// @private Number of pixels in 1rem.
-// For px -> rem, divide by this ratio; for the other way, multiply.
-$px-per-rem: $base-font-size / 1rem
-
-// Return pixel values as rem
-@function px-to-rem($px-value)
- @return $px-value / $px-per-rem
-
-// Return rem values as px
-@function rem-to-px($rem-value)
- @return $rem-value * $px-per-rem
-
-// Print the given expression with px values converted to rem, with px fallback
-// for older browsers.
-//
-// $property - The css property name to set in rems
-// $values - The value (or space-separated list of values) for $property
-// $print-px-fallbacks - Boolean, default: true; whether to print pixel fallback values
-//
-=rem($property, $values, $print-px-fallbacks: $print-rem-px-fallbacks)
- // Create a couple of empty lists as output buffers.
- $px-values: ()
- $rem-values: ()
-
- // If $values isn't a list (because it's only got one value) convert it
- // to a list so we don't have to handle separate cases.
- @if type-of($values) != "list"
- $values: join((), $values)
-
- // Loop through the $values list
- @each $value in $values
- // For each property value, if it's in rem or px, derive both rem and
- // px values for it and add those to the end of the appropriate buffer.
- @if type-of($value) == number and not unitless($value) and (unit($value) == px or unit($value) == rem)
- @if unit($value) == px
- $px-values: join($px-values, $value)
- $rem-values: join($rem-values, px-to-rem($value))
- @else
- $px-values: join($px-values, rem-to-px($value))
- $rem-values: join($rem-values, $value)
- @else
- $px-values: join($px-values, $value)
- $rem-values: join($rem-values, $value)
-
- // By default, print pixel fallbacks for browsers that don't understand rem.
- @if $print-px-fallbacks
- #{$property}: $px-values
-
- // Print rem values for everyone else (overrides pixel values).
- #{$property}: $rem-values
View
16 stylesheets/_rem.scss
@@ -1,7 +1,7 @@
// Base font size in pixels, if not already defined.
// Should be the same as the font-size of the html element.
$base-font-size: 16px !default;
-$print-rem-px-fallbacks: true !default;
+$use-rem-px-fallbacks: true !default;
// @private Number of pixels in 1rem.
// For px -> rem, divide by this ratio; for the other way, multiply.
@@ -22,19 +22,19 @@ $px-per-rem: $base-font-size / 1rem;
//
// $property - The css property name to set in rems
// $values - The value (or space-separated list of values) for $property
-// $print-px-fallbacks - Boolean, default: true; whether to print pixel fallback values
+// $use-px-fallbacks - Boolean, default: true; whether to print pixel fallback values
//
-@mixin rem($property, $values, $print-px-fallbacks: $print-rem-px-fallbacks) {
+@mixin rem($property, $values, $use-px-fallbacks: $use-rem-px-fallbacks) {
// Create a couple of empty lists as output buffers.
$px-values: ();
$rem-values: ();
-
+
// If $values isn't a list (because it's only got one value) convert it
// to a list so we don't have to handle separate cases.
@if type-of($values) != "list" {
$values: join((), $values);
}
-
+
// Loop through the $values list
@each $value in $values {
// For each property value, if it's in rem or px, derive both rem and
@@ -54,12 +54,12 @@ $px-per-rem: $base-font-size / 1rem;
$rem-values: join($rem-values, $value);
}
}
-
+
// By default, print pixel fallbacks for browsers that don't understand rem.
- @if $print-px-fallbacks {
+ @if $use-px-fallbacks {
#{$property}: $px-values;
}
-
+
// Print rem values for everyone else (overrides pixel values).
#{$property}: $rem-values;
}

No commit comments for this range

Something went wrong with that request. Please try again.