Skip to content

Instantly share code, notes, and snippets.

@githiro
Last active August 29, 2015 14:13
Show Gist options
  • Save githiro/a8205eb48ad462f31676 to your computer and use it in GitHub Desktop.
Save githiro/a8205eb48ad462f31676 to your computer and use it in GitHub Desktop.
SASS: rempx mixin. Get pixel-based and rem-based "property: value(s)" set. concat-list(), strip-unit(), rem-calc() functions and Sass ver.3.2.0~ are required.
@mixin rempx($property, $values...) {
$values: concat-list($values);
$max: length($values);
$pxValues: '';
$remValues: '';
@for $i from 1 through $max {
$value: nth($values, $i);
@if $value == auto {
$pxValues: #{$pxValues + $value};
$remValues: #{$remValues + $value};
}
@else {
$unit: unit($value);
@if $value == 0 or $unit == "%" {
$pxValues: #{$pxValues + $value};
$remValues: #{$remValues + $value};
}
@else {
$value: strip-unit($value);
$pxValues: #{$pxValues + $value}px;
$remValues: #{$remValues + rem-calc($value)};
}
}
@if $i < $max {
$pxValues: #{$pxValues + " "};
$remValues: #{$remValues + " "};
}
}
#{$property}: $pxValues;
#{$property}: $remValues;
}
@githiro
Copy link
Author

githiro commented Jan 19, 2015

Usage example:
@include rempx(margin, 16px, 32px, 32px, 16px);
then you'll get:
margin: 16px 32px 32px 16px;
margin: 1rem 2rem 2rem 1rem;
NOTE:

  • Writing "@include rempx(margin, 16 32 32 16);" gets same result.
  • This mixin can also treat "%" and "auto". e.g. @include rempx(margin, 15, auto, 20%);

@zoomilk
Copy link

zoomilk commented Jan 19, 2015

SHOW ME HOW TO DO THIS PLE

@githiro
Copy link
Author

githiro commented Jan 19, 2015

This function is based on the assumption of using Foundation framework(http://foundation.zurb.com).

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