sass mixinsとcssカスタムプロパティ

Question

aye folks！

私は、CSSのカスタムプロパティのためのミックスミックスを作成して、作業を少し簡単にしようとしました。

私の試みは、次のようになりん：

@mixin mixin($value) { 
    background: unquote('$')#{$value}; 
    background: var(--#{$value}, unquote('$')#{$value}); 
} 

出力は次のようになります。

.example { 
    background: $value; 
    background: var(--colour, $value); 
} 

しかしSASS現物に私の$値を変換しません。 $ valueの部分は私の最終的なCSSファイルで終わり、これはうまくいきません。

私は解決策をオンラインで見つけようとしましたが、私はそれを見つけるためには愚痴か、そうでないものがあります。ここの誰かが私が間違っているアイデアを持っていますか？

Answer 1

私は、この例であなたのコードを試しています

@mixin mixin($value) { 
    background: unquote('$')#{$value}; 
    background: var(--#{$value}, unquote('$')#{$value}); 
} 

.example { 
    @include mixin(colour) 
} 

、それが動作します。 出力は

.example { 
    background: $colour; 
    background: var(--colour, $colour); 
} 

です。申し訳ありませんが、この回答を作成するためにコメントを追加する権限はありません。

編集：あなたはあなたの問題を解決するために

@mixin mixin($value, $color) { 
     background: $color; 
     background: var(--#{$value}, $color); 
    } 

このヘルプ：あなたはこのような異なるミックスインを作成することができますか？