How to print px to % in after sass variable? - css

Question

I want print px to % how it possible ? i am create margin classes using loop px is working fine but when i set % than not working like margin-#{$side}: #{$space}%; any solution. i want out-put in %. Thanks in adavance
$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100);
$top: (top);
#each $space in $spaceamounts {
#each $side in $top {
.margin-#{$side}-#{$space} {
margin-#{$side}: #{$space}px;
}
}
}

Answer 1

You can change your code like this to achieve desired result sassmeister
$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100);
$top: (top);
#each $space in $spaceamounts {
#each $side in $top {
.margin-#{$side}-#{$space} {
margin-#{$side}: #{$space}+'%';
}
}
}
Edit - when using node-sass using gulp use unquote
$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100);
$top: (top);
#each $space in $spaceamounts {
#each $side in $top {
.margin-#{$side}-#{$space} {
margin-#{$side}: unquote(#{$space})+'%';
}
}
}

Answer 2

I hope below code will be helpful for you
$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100);
$top: (top);
$percent: ("%");
#each $space in $spaceamounts {
#each $side in $top {
.margin-#{$side}-#{$space} {
margin-#{$side}: #{$space}#{$percent};
}
}
}
OR you can use unquote("%") like
#each $space in $spaceamounts {
#each $side in $top {
.margin-#{$side}-#{$space} {
margin-#{$side}: #{$space}unquote("%");
}
}
}