Skip to content

Instantly share code, notes, and snippets.

@oobleck
Created March 9, 2014 02:52
Show Gist options
  • Save oobleck/9442266 to your computer and use it in GitHub Desktop.
Save oobleck/9442266 to your computer and use it in GitHub Desktop.
My SCSS rem mixin, with px fallback
@mixin rem($property: font-size, $args: 1rem, $important: false) {
$em-base: 16px !default;
$accepted-units: ("px" "rem" "auto" "");
$rems: ();
$px: $rems;
@if $important != false {
$important: !important;
} @else {
$important: '';
}
@each $arg in $args {
$_arg: $arg;
$unit: '';
@if $arg == auto {
$px: join($px, $arg);
$rems: join($rems, $arg);
} @else {
$unit: unit($arg);
// Unit pre-processing
@if not index($accepted-units, $unit) {
@warn "Mixin:rem() : Each value parameter must be one of the following units: #{$accepted-units}.
Parameters received: #{$args}";
}
@if unitless($arg) {
$_arg: $arg * 1rem;
} @elseif $unit == "px" {
$_arg: ($arg / $em-base) * 1rem;
}
// Converted parameters collection
$px: join($px, strip-unit($_arg) * $em-base);
$rems: join($rems, $_arg);
}
}
// Bam! The output.
#{$property}: $px unquote($important);
#{$property}: $rems unquote($important);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment