Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// Toolkit (v2.9.0)
// ----

@import 'toolkit';
$base-line-height: 24px;
$base-font-size: 16px;
/// Converts units from pixels to EMs
/// @example scss - Basic Usage Sass
///   .my-module {
///     font-size: em(24px);
///   }
///
/// @example scss - Basic Usage CSS Output
///   .my-module {
///     font-size: 1.5em;
///   }
/// @require $base-font-size
/// @param {string} $px - pixel units to convert
/// @param {string} $base [16px] - base font size
@function em($px, $base: $base-font-size) {
  @return ($px / $base) * 1em;
}

/// Converts units from pixels to REMs
/// @example scss - Basic Usage Sass
///   .my-module {
///     font-size: rem(24px);
///   }
///
/// @example scss - Basic Usage CSS Output
///   .my-module {
///     font-size: 1.5rem;
///   }
/// @require $base-font-size
/// @param {string} $px - pixel units to convert
/// @param {string} $base [16px] - base font size
@function rem($px, $base: $base-font-size) {
  @return ($px / $base) * 1rem;
}


/// Simple vertical rhythm function returns a REM unit that is a
/// fraction of the line-height of the body. This is useful for maitaining a
/// vertical rhythm in your layouts. Typically using round fractions or
/// mutlipliers (1/4, 1/2, 1, 1.5, 2).
///
/// "RU" is short hand for "__R__hythm __U__nit"
/// @example scss - Basic Usage Sass
///   .my-module {
///     padding: ru(0.5) ru(1.25);
///   }
///
/// @example scss - Basic Usage CSS Output
///   .my-module {
///     padding: 0.75rem 1.875rem; // 12px / 30px
///   }
///
///   Assuming these values
///   $base-line-height: 24px
///   $base-font-size: 16px
/// @require $base-line-height
/// @param {integer} $rhythm-units [1] - units of "leading" defined by default
///   line-height

@function ru($rhythm-units: 1, $px-offset: 0px, $unit: rem) {

  // Error Check $px-offset unit is correct 
  @if (unit($px-offset) != 'px') {
    @error 'Error invalid unit: $px-offset must be a px';
  }


  @if ($unit == rem) {
    @return rem(($base-line-height * $rhythm-units) + $px-offset);

  }@elseif ($unit == em) {
    @return em(($base-line-height * $rhythm-units) + $px-offset);

  }@elseif ($unit == px) {
    @return ($base-line-height * $rhythm-units) + $px-offset;

  }@elseif ($unit != rem) {
    @error 'Invalid Unit Passed to function';
  }
}


.foo {
  width: ru(1);
  width: ru(1, $px-offset: -2px);
  width: ru(1, $px-offset: 24px);
  width: ru(1, px, -2px);  
  width: ru(1, em, $px-offset: -2px);  
}

SassMeister-output.css

Invalid CSS after "...x, $unit: rem, ": expected variable (e.g. $foo), was ") {"