SASS is not working properly. Trying to set prefixes for values of css property

Question

Geez, I tried this

@mixin prefix($property, $value){

    #{$property}: -webkit-#{$value};
    #{$property}:  -moz-#{$value};
    #{$property}: #{$value};
}

but i got this when used this @include prefix(display, border-box)

  display: -webkit- border-box;
  display: -moz- border-box;
  display: border-box; 

There is annoying space between prefix and css value. How to get rid of it? Thnx in advance!

Answer 1

Using your code and just swapping suffix to prefix works fine for me. This is the text string that I stuck into the Sass Try Online generator.

@mixin prefix($property, $value){

    #{$property}: -webkit-#{$value};
    #{$property}:  -moz-#{$value};
    #{$property}: #{$value};
}

h2 {
    @include prefix(display, border-box)
}

The output looked like the following code:

h2 {
  display: -webkit-border-box;
  display: -moz-border-box;
  display: border-box; }