SASS mixin utilisant la fonction SASS rgba() ne fonctionnant pas avec l'interpolation

Question

La documentation SASS indique que la fonction rgba peut être appelée de deux manières.

J'ai créé un codepen pour démontrer la fonction rgba dans un mixin Je rencontre des problèmes avec:

$hd-color1: #366dbd; // heading color 
$hd-shadow1: 0.24;  // text shadow opacity 

@mixin ColorAndTextShadow($color, $opacity) { 
    color: $color; 
    text-shadow: 3px 1px rgba(#{$color}, #{$opacity}); 
} 

h2 { 
    @include ColorAndTextShadow (#{$hd-color1}, #{$hd-shadow1}); 
    font-family: Circular, Helvetica, Arial, sans-serif; 
    font-size: 50px; 
    font-weight: bold; 
    text-transform: uppercase; 
} 

Merci à l'avance pour jeter un oeil

Answer 1

Je crois qu'il est juste une erreur de syntaxe. Vous pouvez transmettre les variables directement.

S'il vous plaît voir le codepen

$hd-color1: #366dbd; // heading color 
$hd-shadow1: 0.24;  // text shadow opacity 

@mixin ColorAndTextShadow($color, $opacity) { 
    color: $color; 
    text-shadow: 3px 1px rgba($color, $opacity); 
} 

h2 { 
    @include ColorAndTextShadow ($hd-color1, $hd-shadow1); 
    font-family: Circular, Helvetica, Arial, sans-serif; 
    font-size: 50px; 
    font-weight: bold; 
    text-transform: uppercase; 
}