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嘗試將所有內容解析爲不帶引號的字符串。