Units to use in your scss files.

unit.scss

$global-font-size: 100% !default;

/// Converts one or more pixel values into matching rem values.
///
/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.
///
/// @returns {List} A list of converted values.
@function rem-calc($values, $base: null) {
    $rem-values: ();
    $count: length($values);

    // If no base is defined, defer to the global font size
    @if $base == null {
        $base: $global-font-size;
    }

    // If the base font size is a %, then multiply it by 16px
    // This is because 100% font size = 16px in most all browsers
    @if unit($base) == '%' {
        $base: ($base / 100%) * 16px;
    }

    // Using rem as base allows correct scaling
    @if unit($base) == 'rem' {
        $base: strip-unit($base) * 16px;
    }

    @if $count == 1 {
        @return to-rem($values, $base);
    }

    @for $i from 1 through $count {
        $rem-values: append($rem-values, to-rem(nth($values, $i), $base));
    }

    @return $rem-values;
}

@function to-rem ($value, $base: null) {
    // Check if the value is a number
    @if type-of($value) != 'number' {
        @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
        @return $value;
    }

    // Calculate rem if units for $value is not rem
    @if unit($value) != 'rem' {
        $value: strip-unit($value) / strip-unit($base) * 1rem;
    }

    // Turn 0rem into 0
    @if $value == 0rem {
        $value: 0;
    }

    @return $value;
}

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}