Add a value to a list in Less CSS

Question

Given the following:

@list: 'banana', 'apple';

How would you add the value 'orange' to this list in LESS CSS?

I have tried the following without success:

@list+: 'orange';
@list: @list + 'orange';
@list: @list ~ 'orange';

Answer 1

You can not do that. Less variables use the last declaration wins rule. A variable referencing itself will create a loop, the assigned value becomes the last declared, and so on.

You can use a loop to build a list which you can assign as a value to a property.

The LESS loops used to generate column classes in twitter - How do they work? shows you how to build a list of selectors.

Answer 2

This wasn't exactly your question, but you can create a new list that includes the original:

@list: 'banana', 'apple';
@new-list: 'orange', @list;

// Using these in classes for display in less2dss.org:
.list {
  content: @list;
}
.new-list {
  content: @new-list;
}

This outputs this (meaningless) CSS as confirmation:

.list {
  content: 'banana', 'apple';
}
.new-list {
  content: 'orange', 'banana', 'apple';
}

See this in less2css.