Sass - Mixins创造动态属性和它的价值

Question

我正在尝试使用mixins使用SASS创建动态css属性.

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

 #{$property} :$value$unit;

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

这会创建一个输出

.class {
   position: relative;
}

我很好.但是当我为边距或填充创建一些属性时,我们应该包括PX.所以我试过这样的事情

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

如下所示,在中间创建一个空格的输出.我如何摆脱这些空间.

.class{
  margin: 10 px
}

Answer 1

您应该使用插值来连接值而不是添加,您可以尝试这样做:

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

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

}

当两个不同的值彼此相邻时,Sass总是在它们之间添加一个空格.通过插值它不会发生,Sass尝试将所有内容解析为不带引号的字符串.