Sass - Mixins which create dynamic property and its valuse

Question

I'm trying to create a dynamic css property using SASS by using mixins.

@mixin setProperty($property,$value,$unit:null){

 #{$property} :$value$unit;

}
.class{
  @include setProperty(position,relative);
}

This creates an output

.class {
   position: relative;
}

I'm fine with this. But when i create some property for margin or padding we should include PX. So i tried something like this

.class{
  @include setProperty(margin,10,px);
 }

which creates output with a space in the middle as follows. How do i get rid of these space.

.class{
  margin: 10 px
}

Answer 1

You should use interpolation to concatenate the values instead of adding, you can try this:

@mixin setProperty($property,$value,$unit:null){

   #{$property} :#{$value}$unit;

}

When two distinct values are next to one another, Sass always adds a whitespace between them. With the interpolation it does not happen, Sass try to parse everything as an unquoted string.