sass mixins und css benutzerdefinierte Eigenschaften

Question

aye Leute!

Ich habe versucht, ein Sass Mixin für css benutzerdefinierte Eigenschaften zu bauen, um die Arbeit ein wenig einfacher zu machen.

mein Versuch wie folgt aussieht:

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

die Ausgabe wie folgt aussieht:

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

ABER sass konvertiert nicht mein $ Wert in die eigentliche Sache. der $ value-Teil endet in meiner finalen CSS-Datei und das funktioniert nicht.

Ich habe versucht, eine Lösung online zu finden, aber ich bin entweder zu dumm, um es zu finden, oder es gibt keins. Hat jemand hier eine Idee, was ich falsch mache?

Answer 1

Ich habe Ihren Code mit diesem Beispiel versuchen:

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

.example { 
    @include mixin(colour) 
} 

und es funktioniert. Die Ausgabe lautet:

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

ist das, was Sie wollen? Entschuldigung, aber ich habe keine Berechtigung zum Hinzufügen eines Kommentars, also erstelle ich diese Antwort.

Edit: Sie einen anderen mixin wie folgt erstellen:

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

diese Ihnen helfen, Ihr Problem zu lösen?