Foundation 5 - Stylus Functions

functions.styl

// This is the default html and body font-size for the base rem value.
$rem-base ?= 16px;

// CT: Stylus Compat
sif($res, $t, $f) {
  return ($res) ? $t : $f;
}

// CT: Stylus Compat
nth($hash, $index) {
  return $hash[$index];
}

// CT: Stylus Compat
scale-color($color, $lightness = false, $darkness = false) {
  if ($lightness) {
    return lighten($color, $lightness);
  } else if ($darkness) {
    return darken($color, $darkness);
  } else {
    return $color;
  }
}

// IMPORT ONCE
// We use this to prevent styles from being loaded multiple times for compenents that rely on other components.
$modules ?= ();
exports($name) {
  if (($name in $modules) == false) {
    append($modules, $name);
    {block}
  }
}

//
// @functions
//

// RANGES
// We use these functions to define ranges for various things, like media queries.
lower-bound($range) {
  if length($range) <= 0 {
    return 0;
  }
  return nth($range, 0);
}

upper-bound($range) {
  if length($range) < 2 {
    return 999999999999;
  }
  return nth($range, 1);
}

// STRIP UNIT
// It strips the unit of measure and returns it
strip-unit($num) {
  return remove-unit($num);
}

// CONVERT TO REM
convert-to-rem($value, $base-value = $rem-base)  {
  // CT: made this smarter
  if (typeof($value) == 'unit') {
    if (unit($value) == '') {
      $value = $value * 1px;
    }

    if (unit($value) == 'px') {
      $value = strip-unit($value) / strip-unit($base-value);

      if ($value != 0) {
        $value = $value * 1rem;
      }
    }
  }

  return $value;
}

data($attr) {
  if $namespace {
    return '[data-' + $namespace + '-' + $attr + ']';
  }

  return '[data-' + $attr + ']';
}

// REM CALC

// New Syntax, allows to optionally calculate on a different base value to counter compounding effect of rem's.
// Call with 1, 2, 3 or 4 parameters, 'px' is not required but supported:
//
//   rem-calc(10 20 30px 40);
//
// Space delimited, if you want to delimit using comma's, wrap it in another pair of brackets
//
//   rem-calc((10, 20, 30, 40px));
//
// Optionally call with a different base (eg: 8px) to calculate rem.
//
//   rem-calc(16px 32px 48px, 8px);
//
// If you require to comma separate your list
//
//   rem-calc((16px, 32px, 48), 8px);
rem-calc($values, $base-value = $rem-base) {
  $max = length($values);

  if $max == 1 {
    return convert-to-rem(nth($values, 0), $base-value); }

  $remValues = ();
  for $i in (0...$max){
    push($remValues, convert-to-rem(nth($values, $i), $base-value));
  }

  return $remValues;
}

// OLD EM CALC
// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
emCalc($values){
  return rem-calc($values);
}

// OLD EM CALC
// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
em-calc($values){
  return rem-calc($values);
}