css - 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尝试将所有内容解析为未加引号的字符串。