Marc Andre Jiacarrini Marc Andre Jiacarrini - 3 months ago 11
Sass (Sass) Question

Concatenation not working

i am new to SASS.
i am trying to concatenate.

$helloWorld: pink;
$secondString: red;
p{
color:$helloWorld + $secondString;
}


but the result is

p {
color: pink; }


why it is not concatenating?
Thanks

Answer

This is because Sass treats colors like their values in hex and when adding, creates the combination of the two, it doesn't concatenate like you think. Here's an example:

$blue: blue;
$red: red;

p {
    color: $blue + $red
}

This yields:

p {
    color: magenta
}

As you can see, this creates the color combo, not string concatenation. Pink and red just so happen to make pink, because #ffc0cb + #ff0000 equals pink. To concatenate, use this:

p {
    color: $helloWorld#{$secondString}
}

That is string interpolation and will yield:

p {
    color: pinkred
}

You can also use a more verbose method like so that forces it to act like strings and unquotes it:

p {
    color: unquote($helloWorld+ "" + $secondString);
}

Try it at SassMeister.