Sass - ダイナミックプロパティとその値を作成するミックスイン

Question

mixinを使用して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はすべてを引用符で囲まれていない文字列として解析しようとします。