Skip to content

Instantly share code, notes, and snippets.

@jensgro
Last active August 29, 2015 14:05
Show Gist options
  • Save jensgro/c5b3cf25df2524f9fe52 to your computer and use it in GitHub Desktop.
Save jensgro/c5b3cf25df2524f9fe52 to your computer and use it in GitHub Desktop.
rem-mixin with oldIE-Fallback
// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// ----
// http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/
@function strip-unit($value) {
@return $value / ($value * 0 + 1);
}
@mixin rem($property, $values...) {
$max: length($values);
$pxValues: '';
$remValues: '';
@if $property == fz {
$property: font-size;
} @else if $property == m {
$property: margin;
} @else if $property == mt {
$property: margin-top;
} @else if $property == mr {
$property: margin-right;
} @else if $property == mb {
$property: margin-bottom;
} @else if $property == ml {
$property: margin-left;
} @else if $property == p {
$property: padding;
} @else if $property == pt {
$property: padding-top;
} @else if $property == pr {
$property: padding-right;
} @else if $property == pb {
$property: padding-bottom;
} @else if $property == pl {
$property: padding-left;
}
@for $i from 1 through $max {
$value: strip-unit(nth($values, $i));
$pxValues: #{$pxValues + $value}px;
@if $i < $max {
$pxValues: #{$pxValues + " "};
}
}
@for $i from 1 through $max {
$value: strip-unit(nth($values, $i));
$remValues: #{$remValues + $value/16}rem;
@if $i < $max {
$remValues: #{$remValues + " "};
}
}
@if $isoldIE == true {
#{$property}: $pxValues;
} @else {
#{$property}: $remValues;
}
}
/* für den IE8 | for IE8 */
$isoldIE: true;
.font-size {
@include rem(fz,20);
}
/* für Browser | for real browsers */
$isoldIE: false;
.font-size {
@include rem(fz,20);
}
/* für den IE8 | for IE8 */
$isoldIE: true;
.padding {
@include rem(p,20,20,15,15);
}
/* für Browser | for real browsers */
$isoldIE: false;
.padding {
@include rem(fz,20,20,15,15);
}
/* für den IE8 | for IE8 */
$isoldIE: true;
.margin-left {
@include rem(ml,50);
}
/* für Browser | for real browsers */
$isoldIE: false;
.margin-left {
@include rem(ml,50);
}
@charset "UTF-8";
/* für den IE8 | for IE8 */
.font-size {
font-size: 20px;
}
/* für Browser | for real browsers */
.font-size {
font-size: 1.25rem;
}
/* für den IE8 | for IE8 */
.padding {
padding: 20px 20px 15px 15px;
}
/* für Browser | for real browsers */
.padding {
font-size: 1.25rem 1.25rem 0.9375rem 0.9375rem;
}
/* für den IE8 | for IE8 */
.margin-left {
margin-left: 50px;
}
/* für Browser | for real browsers */
.margin-left {
margin-left: 3.125rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment