css - SASS 无法正常工作。尝试为 css 属性的值设置前缀

Question

哎呀， 我试过了

@mixin prefix($property, $value){

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

但是当我使用这个@include prefix(display, border-box)

时我得到了这个

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

前缀和 css 值之间有烦人的空格。如何摆脱它？ 提前致谢!

Answer 1

使用您的代码，只需将后缀换成前缀，对我来说效果很好。这是我插入 Sass Try Online generator 的文本字符串.

@mixin prefix($property, $value){

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

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

输出类似于以下代码:

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