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.
Found the answer here: http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/
Sorry for the post