compass 0.12.7 → 0.13.alpha.4

data/frameworks/compass/stylesheets/compass/css3/_selection.scss

@@ -0,0 +1,31 @@
+@import "shared";
+
+// Add the selection selector to any element
+//
+// There are two usage modes: at the stylesheet root, include the mixin with
+// styles passed as mixin content. This applies to all elements. For example:
+//
+//     @include selection {
+//       background-color: #fe57a1;
+//       color: #fff;
+//     }
+//
+// If a specific element is being styled, pass "&" as an argument to the mixin
+// as well. For example:
+//
+//     .hot-pink {
+//       @include selection("&") {
+//         background-color: #fe57a1;
+//         color: #fff;
+//       }
+//     }
+@mixin selection($selector: "") {
+  #{$selector}::selection {
+    @content;
+  }
+  @if $experimental-support-for-mozilla {
+    #{$selector}::-moz-selection {
+      @content;
+    }
+  }
+}

data/frameworks/compass/stylesheets/compass/css3/_shared.scss

@@ -7,8 +7,8 @@
 @mixin experimental($property, $value,
   $moz      : $experimental-support-for-mozilla,
   $webkit   : $experimental-support-for-webkit,
-  $o        : $experimental-support-for-opera,
   $ms       : $experimental-support-for-microsoft,
+  $o        : $experimental-support-for-opera,
   $khtml    : $experimental-support-for-khtml,
   $official : true
 ) {
@@ -20,12 +20,24 @@
   @if $official                                        {         #{$property} : $value; }
 }
 
+// This mixin is a shortcut for applying only a single experimental value
+@mixin experimental-only-for($property, $value,
+  $moz      : false,
+  $webkit   : false,
+  $ms       : false,
+  $o        : false,
+  $khtml    : false,
+  $official : false
+) {
+  @include experimental($property, $value, $moz, $webkit, $o, $ms, $khtml, $official);
+}
+
 // Same as experimental(), but for cases when the property is the same and the value is vendorized
 @mixin experimental-value($property, $value,
   $moz      : $experimental-support-for-mozilla,
   $webkit   : $experimental-support-for-webkit,
-  $o        : $experimental-support-for-opera,
   $ms       : $experimental-support-for-microsoft,
+  $o        : $experimental-support-for-opera,
   $khtml    : $experimental-support-for-khtml,
   $official : true
 ) {
@@ -36,3 +48,215 @@
   @if $o       and $experimental-support-for-opera     { #{$property} :      -o-#{$value}; }
   @if $official                                        { #{$property} :         #{$value}; }
 }
+
+// A debug tool for checking browser support
+@mixin debug-support-matrix($experimental: true, $ie: true) {
+  @debug  #{'$moz-'}$experimental-support-for-mozilla
+          #{'$webkit-'}$experimental-support-for-webkit
+          #{'$microsoft-'}$experimental-support-for-microsoft
+          #{'$opera-'}$experimental-support-for-opera
+          #{'$khtml-'}$experimental-support-for-khtml;
+  @debug  #{'$ie6-'}$legacy-support-for-ie6
+          #{'$ie7-'}$legacy-support-for-ie7
+          #{'$ie8-'}$legacy-support-for-ie8;
+}
+
+// Capture the current exerimental support settings
+@function capture-experimental-matrix() {
+  @return $experimental-support-for-mozilla
+          $experimental-support-for-webkit
+          $experimental-support-for-microsoft
+          $experimental-support-for-opera
+          $experimental-support-for-khtml;
+}
+
+// Capture the current legacy-ie support settings
+@function capture-legacy-ie-matrix() {
+  @return $legacy-support-for-ie6
+          $legacy-support-for-ie7
+          $legacy-support-for-ie8;
+}
+
+// Capture and store support
+$experimental-matrix: capture-experimental-matrix();
+$legacy-ie-matrix: capture-legacy-ie-matrix();
+
+@mixin capture-experimental-matrix {
+  $experimental-matrix: capture-experimental-matrix();
+}
+
+@mixin capture-legacy-ie-matrix {
+  $legacy-ie-matrix: capture-legacy-ie-matrix();
+}
+
+@mixin capture-support-matrix {
+  @include capture-experimental-matrix;
+  @include capture-legacy-ie-matrix;
+}
+
+// Change the experimental-support settings in specific contexts.
+@mixin set-experimental-support(
+  $moz    : false,
+  $webkit : false,
+  $ms     : false,
+  $o      : false,
+  $khtml  : false
+) {
+  $experimental-support-for-mozilla   : $moz;
+  $experimental-support-for-webkit    : $webkit;
+  $experimental-support-for-microsoft : $ms;
+  $experimental-support-for-opera     : $o;
+  $experimental-support-for-khtml     : $khtml;
+}
+
+@mixin capture-and-set-experimental(
+  $moz    : false,
+  $webkit : false,
+  $ms     : false,
+  $o      : false,
+  $khtml  : false
+) {
+  @include capture-experimental-matrix;
+  @include set-experimental-support($moz, $webkit, $ms, $o, $khtml);
+}
+
+@mixin capture-and-adjust-experimental(
+  $moz    : $experimental-support-for-mozilla,
+  $webkit : $experimental-support-for-webkit,
+  $ms     : $experimental-support-for-microsoft,
+  $o      : $experimental-support-for-opera,
+  $khtml  : $experimental-support-for-khtml
+) {
+  @include capture-experimental-matrix;
+  @include set-experimental-support($moz, $webkit, $ms, $o, $khtml);
+}
+
+// Change the legacy-support-for-ie* settings in specific contexts.
+@mixin set-legacy-ie-support(
+  $ie6: false,
+  $ie7: false,
+  $ie8: false
+) {
+  $legacy-support-for-ie6: $ie6;
+  $legacy-support-for-ie7: $ie7;
+  $legacy-support-for-ie8: $ie8;
+}
+
+@mixin capture-and-set-legacy-ie(
+  $ie6: false,
+  $ie7: false,
+  $ie8: false
+) {
+  @include capture-legacy-ie-matrix;
+  @include set-legacy-ie-support($ie6, $ie7, $ie8);
+}
+
+@mixin capture-and-adjust-legacy-ie(
+  $ie6: $legacy-support-for-ie6,
+  $ie7: $legacy-support-for-ie7,
+  $ie8: $legacy-support-for-ie8
+) {
+  @include capture-and-set-legacy-ie($ie6, $ie7, $ie8);
+}
+
+// Capture current browser support matrix, and set a new matrix of support.
+@mixin capture-and-set-support(
+  $moz    : false,
+  $webkit : false,
+  $ms     : false,
+  $o      : false,
+  $khtml  : false,
+  $ie6    : false,
+  $ie7    : false,
+  $ie8    : false
+) {
+  // Capture the current state
+  @include capture-support-matrix;
+
+  // Change support settings
+  @include set-experimental-support($moz, $webkit, $ms, $o, $khtml);
+  @include set-legacy-ie-support($ie6, $ie7, $ie8);
+}
+
+// Capture current browser support matrix, and set a new matrix of support.
+@mixin capture-and-adjust-support(
+  $moz        : $experimental-support-for-mozilla,
+  $webkit     : $experimental-support-for-webkit,
+  $ms         : $experimental-support-for-microsoft,
+  $o          : $experimental-support-for-opera,
+  $khtml      : $experimental-support-for-khtml,
+  $ie6        : $legacy-support-for-ie6,
+  $ie7        : $legacy-support-for-ie7,
+  $ie8        : $legacy-support-for-ie8
+) {
+  @include capture-and-set-support($moz, $webkit, $ms, $o, $khtml, $ie6, $ie7, $ie8);
+}
+
+
+// This mixin allows you to change the experimental support settings for
+// child (@content) styles.
+@mixin with-only-support-for(
+  $moz    : false,
+  $webkit : false,
+  $ms     : false,
+  $o      : false,
+  $khtml  : false,
+  $ie6    : false,
+  $ie7    : false,
+  $ie8    : false
+) {
+  // Capture current state
+  $wo-experimental-matrix : capture-experimental-matrix();
+  $wo-legacy-ie-matrix    : capture-legacy-ie-matrix();
+
+  // Set new states
+  @include set-experimental-support($moz, $webkit, $ms, $o, $khtml);
+  @include set-legacy-ie-support($ie6, $ie7, $ie8);
+
+  // Apply styles
+  @content;
+
+  // Return to original support settings
+  @include set-experimental-support($wo-experimental-matrix...);
+  @include set-legacy-ie-support($wo-legacy-ie-matrix...);
+}
+
+// This mixin is a shortcut for making slight adjustments to browser support
+// for child (@content) styles
+@mixin adjust-support-for(
+    $moz        : $experimental-support-for-mozilla,
+    $webkit     : $experimental-support-for-webkit,
+    $ms         : $experimental-support-for-microsoft,
+    $o          : $experimental-support-for-opera,
+    $khtml      : $experimental-support-for-khtml,
+    $ie6        : $legacy-support-for-ie6,
+    $ie7        : $legacy-support-for-ie7,
+    $ie8        : $legacy-support-for-ie8
+) {
+  @include with-only-support-for($moz, $webkit, $ms, $o, $khtml, $ie6, $ie7, $ie8) {
+    @content;
+  }
+}
+
+// Set a default value if the given arglist is empty
+@function set-arglist-default(
+  $arglist,
+  $default
+) {
+  $default: if(length($default) > 0, $default, null);
+  $output: compact();
+  @each $layer in $arglist {
+    $output: append($output, if($layer == 'default', $default, $layer));
+  }
+  @return if(length($output) > 0, $output, $default);
+}
+
+// @private Returns the legacy value for a given box-model
+// - Used by background-clip and -origin.
+@function legacy-box($box) {
+  $box: unquote($box);
+  @if $box == padding-box { $box: padding; }
+  @if $box == border-box { $box: border; }
+  @if $box == content-box { $box: content; }
+  @return $box;
+}

data/frameworks/compass/stylesheets/compass/css3/_text-shadow.scss

@@ -1,13 +1,17 @@
+// Text Shadow
+
 @import "shared";
 
+
 // These defaults make the arguments optional for this mixin
 // If you like, set different defaults in your project
 
-$default-text-shadow-color:    #aaa !default;
-$default-text-shadow-h-offset: 0px  !default;
-$default-text-shadow-v-offset: 0px  !default;
-$default-text-shadow-blur:     1px  !default;
-$default-text-shadow-spread:   false  !default;
+$default-text-shadow-color      : #aaa    !default;
+$default-text-shadow-h-offset   : 0px     !default;
+$default-text-shadow-v-offset   : 0px     !default;
+$default-text-shadow-blur       : 1px     !default;
+$default-text-shadow-spread     : false   !default;
+
 
 // Provides cross-browser text shadows when one or more shadows are needed.
 // Each shadow argument should adhere to the standard css3 syntax for the
@@ -18,32 +22,23 @@ $default-text-shadow-spread:   false  !default;
 // then with the spread included. This allows you to progressively
 // enhance the browsers that do support the spread parameter.
 @mixin text-shadow(
-  $shadow-1 : default,
-  $shadow-2 : false,
-  $shadow-3 : false,
-  $shadow-4 : false,
-  $shadow-5 : false,
-  $shadow-6 : false,
-  $shadow-7 : false,
-  $shadow-8 : false,
-  $shadow-9 : false,
-  $shadow-10: false
+  $shadow...
 ) {
-  @if $shadow-1 == default {
-    $shadow-1: compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color);
-  }
+  $shadow: if(length($shadow) > 0, $shadow, default);
+  $default: -compass-space-list(compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color));
   $shadows-without-spread: join((),(),comma);
   $shadows: join((),(),comma);
   $has-spread: false;
-  @each $shadow in compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5,
-                           $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) {
-    @if length($shadow) > 4 {
+
+  @each $layer in $shadow {
+    $layer: if($layer == 'default', $default, $layer);
+    @if length($layer) > 4 {
       $has-spread: true;
-      $shadows-without-spread: append($shadows-without-spread, nth($shadow,1) nth($shadow,2) nth($shadow,3) nth($shadow,5));
-      $shadows: append($shadows, $shadow);
-    } else {
-      $shadows-without-spread: append($shadows-without-spread, $shadow);
-      $shadows: append($shadows, $shadow);
+      $shadows-without-spread: append($shadows-without-spread, nth($layer,1) nth($layer,2) nth($layer,3) nth($layer,5));
+      $shadows: append($shadows, $layer);
+    } @else {
+      $shadows-without-spread: append($shadows-without-spread, $layer);
+      $shadows: append($shadows, $layer);
     }
   }
   @if $has-spread {

data/frameworks/compass/stylesheets/compass/css3/_transform-legacy.scss

@@ -8,7 +8,7 @@
 
 @mixin apply-transform($transform) {
   @include experimental(transform, $transform,
-    -moz, -webkit, -o, not -ms, not -khtml, official
+    -moz, -webkit, not -ms, -o, not -khtml, official
   );
 }
 
@@ -16,7 +16,7 @@
 
 @mixin apply-origin($origin) {
   @include experimental(transform-origin, $origin,
-    -moz, -webkit, -o, not -ms, not -khtml, official
+    -moz, -webkit, not -ms, -o, not -khtml, official
   );
 }
 
@@ -32,7 +32,7 @@
        @include apply-origin($originx);
      }
   }
-} 
+}
 
 // A full transform mixin with everything you could want
 //

data/frameworks/compass/stylesheets/compass/css3/_transform.scss

@@ -104,11 +104,11 @@ $default-skew-y      : 5deg                  !default;
   $only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2;
   @if $only3d {
     @include experimental(transform-origin, $origin,
-      -moz, -webkit, -o, -ms, not -khtml, official
+      -moz, -webkit, -ms, -o, not -khtml, official
     );
   } @else {
     @include experimental(transform-origin, $origin,
-      -moz, -webkit, -o, -ms, not -khtml, official
+      -moz, -webkit, -ms, -o, not -khtml, official
     );
   }
 }
@@ -147,11 +147,11 @@ $default-skew-y      : 5deg                  !default;
 ) {
   @if $only3d {
     @include experimental(transform, $transform,
-      -moz, -webkit, -o, -ms, not -khtml, official
+      -moz, -webkit, -ms, -o, not -khtml, official
     );
   } @else {
     @include experimental(transform, $transform,
-      -moz, -webkit, -o, -ms, not -khtml, official
+      -moz, -webkit, -ms, -o, not -khtml, official
     );
   }
 }
@@ -179,7 +179,7 @@ $default-skew-y      : 5deg                  !default;
 // values from 500 to 1000 are more-or-less "normal" - a good starting-point.
 @mixin perspective($p) {
   @include experimental(perspective, $p,
-    -moz, -webkit, -o, -ms, not -khtml, official
+    -moz, -webkit, -ms, -o, not -khtml, official
   );
 }
 
@@ -190,7 +190,7 @@ $default-skew-y      : 5deg                  !default;
 // where the two arguments represent x/y coordinates
 @mixin perspective-origin($origin: 50%) {
   @include experimental(perspective-origin, $origin,
-    -moz, -webkit, -o, -ms, not -khtml, official
+    -moz, -webkit, -ms, -o, not -khtml, official
   );
 }
 
@@ -202,7 +202,7 @@ $default-skew-y      : 5deg                  !default;
 // Browsers default to `flat`, mixin defaults to `preserve-3d`.
 @mixin transform-style($style: preserve-3d) {
   @include experimental(transform-style, $style,
-    -moz, -webkit, -o, -ms, not -khtml, official
+    -moz, -webkit, -ms, -o, not -khtml, official
   );
 }
 
@@ -214,7 +214,7 @@ $default-skew-y      : 5deg                  !default;
 // Browsers default to visible, mixin defaults to hidden
 @mixin backface-visibility($visibility: hidden) {
   @include experimental(backface-visibility, $visibility,
-    -moz, -webkit, -o, -ms, not -khtml, official
+    -moz, -webkit, -ms, -o, not -khtml, official
   );
 }
 

data/frameworks/compass/stylesheets/compass/css3/_transition.scss

@@ -68,7 +68,7 @@ $transitionable-prefixed-values: transform, transform-origin !default;
   @if type-of($duration-1) == string { $duration-1: unquote($duration-1); }
   $durations: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10);
   @include experimental(transition-duration, $durations,
-    -moz, -webkit, -o, not -ms, not -khtml, official
+    -moz, -webkit, not -ms, -o, not -khtml, official
   );
 }
 
@@ -92,7 +92,7 @@ $transitionable-prefixed-values: transform, transform-origin !default;
   $function-1: unquote($function-1);
   $functions: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10);
   @include experimental(transition-timing-function, $functions,
-    -moz, -webkit, -o, not -ms, not -khtml, official
+    -moz, -webkit, not -ms, -o, not -khtml, official
   );
 }
 
@@ -115,7 +115,7 @@ $transitionable-prefixed-values: transform, transform-origin !default;
   @if type-of($delay-1) == string { $delay-1: unquote($delay-1); }
   $delays: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10);
   @include experimental(transition-delay, $delays,
-    -moz, -webkit, -o, not -ms, not -khtml, official
+    -moz, -webkit, not -ms, -o, not -khtml, official
   );
 }
 

data/frameworks/compass/stylesheets/compass/css3/_user-interface.scss

@@ -1,9 +1,15 @@
-// User Interface ------------------------------------------------------------
+// User Interface
 // This file can be expanded to handle all the user interface properties as
 // they become available in browsers:
 // http://www.w3.org/TR/2000/WD-css3-userint-20000216
+
 @import "shared";
 
+// @private css3-feature-support variables must always include a list of five boolean values
+// representing in order: -moz, -webkit, -ms, -o, -khtml
+//   - mozilla support handled seperately below
+$userselect-support: not -moz, -webkit, -ms, not -o, -khtml;
+
 
 // This property controls the selection model and granularity of an element.
 //
@@ -11,7 +17,40 @@
 //   [ none | text | toggle | element | elements | all | inherit ]
 @mixin user-select($select) {
   $select: unquote($select);
-  @include experimental(user-select, $select,
-    -moz, -webkit, not -o, not -ms, -khtml, official
-  );
+
+  @if $experimental-support-for-mozilla {
+    -moz-user-select: if($select == 'none', -moz-none, $select);
+  }
+  @include experimental(user-select, $select, $userselect-support...);
+}
+
+// Style the html5 input placeholder in browsers that support it.
+//
+// There are two usage modes: at the stylesheet root, include the mixin with
+// styles passed as mixin content. This applies to all elements. For example:
+//
+//     @include input-placeholder {
+//       color: #bfbfbf;
+//       font-style: italic;
+//     }
+//
+// If a specific element is being styled, pass "&" as an argument to the mixin
+// as well. For example:
+//
+//     .textinput {
+//       @include input-placeholder("&") {
+//         color: #bfbfbf;
+//         font-style: italic;
+//       }
+//     }
+@mixin input-placeholder($selector: "") {
+  @if $experimental-support-for-webkit {
+    #{$selector}::-webkit-input-placeholder { @content; }
+  }
+  @if $experimental-support-for-mozilla {
+    #{$selector}:-moz-placeholder { @content; }
+  }
+  @if $experimental-support-for-microsoft {
+    #{$selector}:-ms-input-placeholder { @content; }
+  }
 }

data/frameworks/compass/stylesheets/compass/typography/_units.scss

@@ -0,0 +1,152 @@
+// @private Default font-size for all browsers
+$browser-default-font-size: 16px;
+
+// 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;
+
+// Whether to output fallback values in px when outputting rems.
+$rem-with-px-fallback: true !default;
+
+
+// Convert any CSS <length> or <percentage> value to any another.
+//
+// @param $length
+//   A css <length> or <percentage> value
+//
+// @param $to-unit
+//   String matching a css unit keyword, e.g. 'em', '%', etc.
+//
+// @param $from-context
+//   When converting from relative units, the absolute length (in px) to
+//   which $length refers (e.g. for $lengths in em units, would normally be the
+//   font-size of the current element).
+//
+// @param $to-context
+//   For converting to relative units, the absolute length in px to which the
+//   output value will refer. Defaults to the same as $from-context, since it is
+//   rarely needed.
+@function convert-length(
+	$length,
+	$to-unit,
+	$from-context: $base-font-size,
+	$to-context: $from-context
+) {
+
+	$from-unit: unit($length);
+
+	// Optimize for cases where `from` and `to` units are accidentally the same.
+	@if $from-unit == $to-unit { @return $length; }
+
+	// Context values must be in px so we can determine a conversion ratio for
+	// relative units.
+	@if unit($from-context) != 'px' { @warn "Paremeter $from-context must resolve to a value in pixel units."; }
+	@if unit($to-context) != 'px' { @warn "Parameter $to-context must resolve to a value in pixel units."; }
+
+	// Convert input length to pixels
+	$px-length: $length;
+
+	@if $from-unit != 'px' {
+		// Convert relative units using the from-context parameter.
+		@if      $from-unit == 'em'  { $px-length: $length * $from-context / 1em }
+		@else if $from-unit == 'rem' { $px-length: $length * $base-font-size / 1rem }
+		@else if $from-unit == '%'   { $px-length: $length * $from-context / 100% }
+		@else if $from-unit == 'ex'  { $px-length: $length * $from-context / 2ex }
+		// Convert absolute units using Sass' conversion table.
+		@else if $from-unit == 'in'  or
+						 $from-unit == 'mm'  or
+						 $from-unit == 'cm'  or
+						 $from-unit == 'pt'  or
+						 $from-unit == 'pc'  { $px-length: 0px + $length }
+		// Certain units can't be converted.
+		@else if $from-unit == 'ch'  or
+						 $from-unit == 'vw'  or
+						 $from-unit == 'vh'  or
+						 $from-unit == 'vmin' {
+			@warn "#{$from-unit} units can't be reliably converted; Returning original value.";
+			@return $length;
+		}
+		@else {
+			@warn "#{$from-unit} is an unknown length unit. Returning original value.";
+			@return $length;
+		}
+	}
+
+	// Convert length in pixels to the output unit
+	$output-length: $px-length;
+	@if $to-unit != 'px' {
+		// Relative units
+		@if      $to-unit == 'em'  { $output-length: $px-length * 1em / $to-context }
+		@else if $to-unit == 'rem' { $output-length: $px-length * 1rem / $base-font-size }
+		@else if $to-unit == '%'   { $output-length: $px-length * 100% / $to-context }
+		@else if $to-unit == 'ex'  { $output-length: $px-length * 2ex / $to-context }
+		// Absolute units
+		@else if $to-unit == 'in'  { $output-length: 0in + $px-length }
+		@else if $to-unit == 'mm'  { $output-length: 0mm + $px-length }
+		@else if $to-unit == 'cm'  { $output-length: 0cm + $px-length }
+		@else if $to-unit == 'pt'  { $output-length: 0pt + $px-length }
+		@else if $to-unit == 'pc'  { $output-length: 0pc + $px-length }
+		// Non-convertible units
+		@else if $to-unit == 'ch'  or
+						 $to-unit == 'vw'  or
+						 $to-unit == 'vh'  or
+						 $to-unit == 'vmin' {
+			@warn "#{$to-unit} units can't be reliably converted; Returning original value.";
+			@return $length;
+		}
+		@else {
+			@warn "#{$to-unit} is an unknown length unit. Returning original value.";
+			@return $length;
+		}
+	}
+
+	@return $output-length;
+}
+
+
+// Output a given style rule containing rem values along with an (optional)
+// fallback rule for older browsers (with rem values converted to px).
+//
+// @param $property
+//   The css property name.
+//
+// @param $values
+//   The value (or space-separated list of values) for the property.
+//
+// @param $use-px-fallback
+//   [ true | false ]
+//
+@mixin rem($property, $values, $use-px-fallback: $rem-with-px-fallback) {
+	// Create a couple of empty lists as output buffers.
+	$px-values: ();
+	$rem-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.
+		// Ensure all pixel values are rounded to the nearest pixel.
+		@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, round($value));
+				$rem-values: join($rem-values, convert-length($value, rem));
+			}
+			@else {
+				$px-values: join($px-values, round(convert-length($value, px)));
+				$rem-values: join($rem-values, $value);
+			}
+		}
+		@else {
+			$px-values: join($px-values, $value);
+			$rem-values: join($rem-values, $value);
+		}
+	}
+
+	// Use pixel fallback for browsers that don't understand rem units.
+	@if $use-px-fallback {
+		#{$property}: $px-values;
+	}
+
+	// Use rem values for everyone else (overrides pixel values).
+	#{$property}: $rem-values;
+}