Skip to content

Instantly share code, notes, and snippets.

@arthurgouveia
Last active December 30, 2015 22:49
Show Gist options
  • Select an option

  • Save arthurgouveia/7897204 to your computer and use it in GitHub Desktop.

Select an option

Save arthurgouveia/7897204 to your computer and use it in GitHub Desktop.
Sass function to output a property, along with it's values, with REM or PX units, depending on the value of $px-only
$font-size: 16;
$px-only: true;
@function u($values){
$list: ();
@each $value in $values {
@if $value == 'auto' {
$list: append($list, $value);
}
@else {
@if ($px-only) {
$list: append($list, $value + px);
}
@else {
$list: append($list, ($value/$font-size) + rem);
}
}
}
@return $list();
}
@arthurgouveia
Copy link
Author

This:

$px-only: false;

.main {
    width: u(960);
    margin: u(0 auto);
}

$px-only: true;

.main {
    width: u(1120);
    margin: u(30 auto 30);
}

Generates this:

.main {
  width: 60rem;
  margin: 0rem auto;
}

.main {
  width: 1120px;
  margin: 30px auto 30;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment