jdsteinbach
7/16/2014 - 3:05 PM

Generated by SassMeister.com.

Generated by SassMeister.com.

/* Yes, technically CSS is "valid SCSS" 
but I don't know of a way to process a css declaration block as a map, 
which is essentially what you're trying to do. 
My best answer is to save your '.class' data as a map,
then process that map with a dump() mixin.*/
.class {
  width: 20px;
  height: 20px;
}

.class-two {
  width: 1.25em;
  height: 1.25em;
}

.class-two-result {
  width: 1.25em;
  height: 1.25em;
}

.class-three {
  width: 16px;
  height: 2em;
}

.class-four {
  width: 1em;
  height: 2em;
}
// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

/* Yes, technically CSS is "valid SCSS" 
but I don't know of a way to process a css declaration block as a map, 
which is essentially what you're trying to do. 
My best answer is to save your '.class' data as a map,
then process that map with a dump() mixin.*/

$base-font-size: 16px;
@function em($px, $base: $base-font-size) {
  @if unit($px) == "px" {
    @return ($px / $base) * 1em;
  } @else {
    //@warn 'Your $px variable is not in pixels!';
    @return $px;
  }
}

@mixin dump($map, $emme: false) {
  @each $label, $value in $map {
    @if $emme == true {
      $value: em($value);
    }
    #{$label}: $value;
  }
}
@mixin emme($map) {
  @include dump($map, true);
}
$defaults: (
  width: 20px,
  height: 20px,
);
$defaults-2: (
  width: 16px,
  height: 2em,
);

.class {
  @include dump($defaults);
}

.class-two {
  @include emme($defaults);
}

.class-two-result {
  width: em(20px);
  height: em(20px);
}

.class-three {
  @include dump($defaults-2);
}

.class-four {
  @include emme($defaults-2);
}