Marc Andre Jiacarrini Marc Andre Jiacarrini - 1 month ago 7x
Sass (Sass) Question

Concatenation not working

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

$helloWorld: pink;
$secondString: red;
color:$helloWorld + $secondString;

but the result is

p {
color: pink; }

why it is not concatenating?


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.