CODEWITHSUNDEEP
cssvariablessassapostrophe
Adonis K. Kakoulidis
Adonis K. Kakoulidis

Reputation: 5133

SCSS variable content inside apostrophes

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

What i want to do is escape the apostrophe's ability of turning $color1 into a string. startColorstr='$color1' into startColor1str='#000000'.

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

this didnt work

Upvotes: 0

Views: 574

Answers (1)

Adonis K. Kakoulidis
Adonis K. Kakoulidis

Reputation: 5133

apparently i had to add the variable inside brackets like '{$color}' but still that wouldnt work alone. i had to also add a '#' (hash) as well like '#{$color}' (even though i was passing the value of "#333" in the mixin, it still required the #

So the result looks something like this:

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

Upvotes: 2

Related Questions