Clever Geek Handbook

Add value to list in less CSS

Considering the following:

@list: 'banana', 'apple';

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

I have tried the following with no success:

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


source to share


2 answers


You cannot do this. Less variables use the last declaration rule . A variable referencing itself will create a loop, the assigned value will be the last one declared, and so on.

You can use loop to create a list that you can assign as a value to a property.



Smaller loops used to create tweet column classes. How do they work? shows how to create a list of selectors.

+1


source


It wasn't really 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 (nonsensical) CSS as confirmation:



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

See this in less2css .

+1


source






More articles:


All Articles