Skip to content

Instantly share code, notes, and snippets.

@justinhough
Last active August 29, 2015 14:19
Show Gist options
  • Save justinhough/c789e9510133b68d0aaf to your computer and use it in GitHub Desktop.
Save justinhough/c789e9510133b68d0aaf to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.1.0)
// ----
$default-font-size: 16;
@function remove-unit($num) {
@return $num / ($num * 0 + 1);
}
@mixin rem($property, $values) {
$total: length($values);
$px-value: "";
$rem-value: "";
@for $i from 1 through $total {
$value: nth($values, $i);
// Check if $value is string or not
@if type_of($value) != string{
// convert to REM
$value: remove-unit(nth($values, $i));
$px-value: #{$px-value + $value}px;
$rem-value: #{$rem-value + $value / $default-font-size}rem;
}
@else {
// pass value is string
$value: nth($values, $i);
$px-value: #{$px-value + $value};
$rem-value: #{$rem-value + $value};
}
@if $i < $total {
// Set PX
$rem-value: #{$rem-value + " "};
// Set REM
$px-value: #{$px-value + " "};
}
}
#{$property}: $px-value;
#{$property}: $rem-value;
}
/* WITH VALUES */
@include rem(padding, 12px 16px);
@include rem(margin, 16 20);
/* WITH AUTO */
@include rem(margin, 12px auto);
@include rem(margin, 16 auto);
/* WITH VALUES */
padding: 12px 16px;
padding: 0.75rem 1rem;
margin: 16px 20px;
margin: 1rem 1.25rem;
/* WITH AUTO */
margin: 12px auto;
margin: 0.75rem auto;
margin: 16px auto;
margin: 1rem auto;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment