Colors are not concatenating correctly in Sass -

i trying concatenate 2 colors in sass:

$helloworld: pink; $secondstring: red;  p {   color:$helloworld + $secondstring; } 

but result is:

 p {   color: pink; } 

why aren't colors concatenating produce pinkred?

this because sass treats colors hex value, regardless if they're named pink. they're hex values under hood. per sass documentation:

colors

any css color expression returns sassscript color value. includes a large number of named colors indistinguishable unquoted strings.

the emphasis mine. documentation states color value returned, hex value. included link shows named colors such pink hex values under hood. address adding issue, refer documentation again:

color operations

all arithmetic operations supported color values, work piecewise. means operation performed on red, green, , blue components in turn. example:

p {   color: #010203 + #040506; } 

computes 01 + 04 = 05, 02 + 05 = 07, , 03 + 06 = 09, , compiled to:

p {   color: #050709; } 

the same principle applies here. when use addition on colors, aren't concatenating them strings, pink + red not pinkred. instead, hex values added piecewise. here's example:

$blue: blue; $red: red;  p {     color: $blue + $red } 

this yields:

p {     color: magenta } 

from example above, can see not perform string concatenation, it's adding blue (#0000ff) , red (#ff0000) create magenta (#ff00ff). in case, pink (#ffc0cb) , red (#ff0000) added piecewise produce #ffc0cb, pink. that's why pink instead of pinkred.

if want concatenate them strings, do not use+. instead, can try string interpolation colors treated strings, not colors:

p {     color: $helloworld#{$secondstring} } 

that yield:

p {     color: pinkred } 

you can use more verbose method it's forced act string (unquote gets rid of quotes):

p {     color: unquote($helloworld+ "" + $secondstring); } 

try @ sassmeister. note pinkred isn't named colors in sass.