Search code examples
sasscompass-sass

Output a semicolon in a SASS function


I'm struggling to output a semicolon via the @return line in a SASS function.

The thing is i want to convert my input data to both a pixel and a rem value. It may be an ugly approach, but it;s the best i can come up with at the moment

So for example, i want the following CSS output:

p {
    margin: 10px 10px 0 0;
    margin: 1rem 1rem 0 0;
}

I almost have this working with the following function

@function distance($declaration,$sizeValue: 1.6) {
    $list-px: ();
    $list-rem: ();
    @each $value in $sizeValue{
        $list-px:append($list-px, ($value * 10)+px);
        $list-rem:append($list-rem, $value+rem);
    }
    @return $list-px $declaration +':' $list-rem;
}

Which gives me the output:

margin: 0px 0px 20px 0px margin: 0rem 0rem 2rem 0rem;

but without the semicolon before the second margin

I also tried @return $list-px +';' $declaration +':' $list-rem;, but that generated an output like margin: "0px 0px 20px 0px;" margin: 0rem 0rem 2rem 0rem;

I hope someone can help me out with this.


Solution

  • Found the answer here: http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/

    Sorry for the post