Functions

We love Foundation and we've been using it a lot. These functions are based on our preferred Foundation functions that we want to continue to use in our projects.

remove-unit()

arguments: $value

• $value
  • required
  • type: list

removes the unit from a value Example

$foo: remove-unit(10px); //will return 10

rem-calc()

arguments: $values, $base-value

• $values
  • required
  • type: list
• $base-value
  • optional
  • default: $rem-base
  • type: measure

Transforms an array of pixel values (with or without px) in rem unit, based on the optional $base-value passed to the function.

Examples

.foo{
  margin: rem-calc(16 8 16 8);
  padding: rem-calc(8px);
}

will return:

.foo{
  margin: 1rem 0.5rem 1rem 0.5rem;
  padding: 0.5rem;
}

em-calc()

arguments: $values, $base-value

• $values
  • required
  • type: list
• $base-value
  • optional
  • default: $rem-base
  • type: measure

Transforms an array of pixel values (with or without px) in em unit, based on the optional $base-value passed to the function.

Examples

.foo{
  margin: em-calc(16 8 16 8);
  padding: em-calc(8, 8);
}

will return:

.foo{
  margin: 1em 0.5em 1em 0.5em;
  padding: 0.5em;
}

px-calc()

arguments: $values, $base-value

• $values
  • required
  • type: list
• $base-value
  • optional
  • default: $rem-base
  • type: measure

Transforms an array of ems or rems values (with or without em/rem) in pixel unit, based on the optional $base-value passed to the function.

Example

.foo{
  margin: px-calc(1em 0.5em 1em 0.5em);
  padding: px-calc(1rem);
}

will return:

.foo{
  margin: 16px 8px 16px 8px;
  padding: 16px;
}