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);
}