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