css - アポストロフィ内の SCSS 変数コンテンツ

Question

@mixin f1($color1, $color2){
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color1', endColorstr='$color2',GradientType=0);
}

私がやりたいことは、$color1 を文字列に変換するアポストロフィの機能を回避することです。startColorstr='$color1' を startColor1str='#000000' に変換します。

@mixin f1($color1, $color2){
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=+"'"+$color1+"'"+, endColorstr=+"'"+$color2+"'"+,GradientType=0);
}

これはうまくいきませんでした

Answer 1

どうやら「{$color}」のように角かっこ内に変数を追加する必要がありましたが、それでも単独では機能しません。'#{$color}' のように '#' (ハッシュ) も追加する必要がありました (mixin で "#333" の値を渡していたにもかかわらず、それでも # が必要でした)

したがって、結果は次のようになります。

@mixin f1($color1,$color2){
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color1}', endColorstr='#{$color2}',GradientType=0);
}