CODEWITHSUNDEEP
csswebless
Vitamin
Vitamin

Reputation: 1526

Can't seem to concatenate two variables in LESS

I'm trying to combine two variables @a and @b into a string, with the variables values separated by a comma. This is my attempt:

p {
    @a: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    @b: 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: ~"@{a}, @{b}";
}

Output:

p {box-shadow: [object Object],[object Object]}

Expected:

p {box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)}

What am I doing wrong?

Upvotes: 0

Views: 3330

Answers (2)

Todd
Todd

Reputation: 41

Correction Answer updated, per suggestion of @seven-phases-max

The simplest solution works as expected:

p {
    @a: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    @b: 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: @a, @b;
}

Here is the new demo:

http://codepen.io/anon/pen/wxeFg

Upvotes: 0

ScottS
ScottS

Reputation: 72261

I realize from the comments you were directed to an answer that helped. Just to clarify why your original solution did not work, it was because you did not have the variables defined as strings. You needed this (note quotes around your strings):

p {
    @a: "inset 0 1px 1px rgba(0, 0, 0, 0.075)";
    @b: "0 0 8px rgba(82, 168, 236, 0.6)";
    box-shadow: ~"@{a}, @{b}";
}

Upvotes: 1

Related Questions