Arrays with Less

Question

With SASS you can create an array of variables like this:

$badge-colors: blue #7FB3D4, gray #767676, green #8CC079, red #b35d5d, dark-red #b5473e, black #666         


        

Answer 1

// DEFINE COLORS AS VARIABLES TO BETTER HANDLE
@blue: #7FB3D4;
@gray: #767676;
@green #8CC079;
@red #b35d5d;
@dark-red: #b5473e;
@black: #666;
@cyan: #81BABD;
@purple: #AEA7CF;

// CREATE ARRAY
@badge-colors: '@{blue}','@{gray}','@{green}','@{red}','@{dark-red}','@{black}','@{cyan}','@{purple}';
// SAVE YOUR ARRAY LENGTH
@howmany: length(@|badge-colors);

// LOOP THROUGH THEM, SEE: https://gist.github.com/juanbrujo
.loop (@index) when (@index > 0){
    // CLEAN EACH COLOR NAME
    @color: e(extract(@badge-colors, @index));
    // USE EACH COLOR
    element{
      color: @color;
    }
    .loop (@index - 1);
}
.loop(0){}
// KEEP LOOPING
.loop(@howmany);
// END

Answer 2

// DEFINE COLORS AS VARIABLES
@blue: #0000FF;
@green: #00FF00;
@red: #FF0000;
@yellow: #FFFF00;

// CREATE ARRAYS
@badge-color-names: 'blue', 'green', 'red', 'yellow';
@badge-colors: '@{blue}', '@{green}', '@{red}', '@{yellow}';

// MIXIN
.make-badge-colors(@badge-color-names, @badge-colors) {
  .badge-color(@index) when (@index =< length(@badge-colors)) {
    @name:  extract(@badge-color-names, @index);
    @value: extract(@badge-colors, @index);
    @item: ~".badge-@{name}";
    @{item} {
      color: color(@value) !important;
    }
    .badge-color(@index + 1);
  }
  .badge-color(1);
}

// CREATE
.make-badge-colors(@badge-color-names, @badge-colors);




// COMPILED OUTPUT
.badge-blue {
  color: #0000FF !important;
}
.badge-green {
  color: #00FF00 !important;
}
.badge-red {
  color: #FF0000 !important;
}
.badge-yellow {
  color: #FFFF00 !important;
}

Answer 3

The answer to the question is "Yes, you can create and work with arrays in Less". An array (in CSS and thus Less realm it's usually referred to as "List") is defined with just the same code as in your Q:

@badge-colors: blue #7FB3D4, gray #767676, green #8CC079, red #b35d5d;

• See "List Functions" for functions to help you to iterate through such lists/arrays and access their items.
• Also see this answer for certain advanced/not-so-obvious properties of Less lists.
• Additionally see the "Lists Plugin" for typical list/array/map manipulation functions and features.

---

A typical introductory example of working with Less arrays would be a snippet to iterate through simple color list (via loop) to create corresponding CSS classes:

@colors: blue, green, yellow, red;

// mixin to iterate over colors and create CSS class for each one
.make-color-classes(@i: length(@colors)) when (@i > 0) {
    .make-color-classes(@i - 1);
    @color: extract(@colors, @i); 
    .@{color} {
        color: @color;  
    }
}

.make-color-classes(); // run the mixin

---

The second example is a more practical version of the first one. Creating "custom color" classes from a "two-dimensional" list (in this case being a simple equivalent of a key/value array, i.e. "map") similar to the array of the question.

Using "Modern Less" (via less-plugin-lists .for-each statement):

@badge-colors: 
    blue  #44BBFF,
    gray  #F0F1F5,
    green #66CC99,
    red   #FC575E;

.for-each(@pair in @badge-colors) {
    @key: at(@pair, 1);
    .badge-@{key} {
        color: at(@pair, 2);
    }
}

---

Same example in "Legacy Less" (using recursive mixins):

// usage:

@badge-colors: blue #7FB3D4, gray #767676, green #8CC079, red #b35d5d;

.make-classes(badge, @badge-colors);

// impl.:

.make-classes(@prefix, @list) {
    .iter(length(@list));
    .iter(@i) when (@i > 0) {
        .iter(@i - 1);
        @pair:  extract(@list, @i); 
        @key:   extract(@pair, 1);
        @value: extract(@pair, 2); 
        .@{prefix}-@{key} {
            color: @value;  
        }
    }
}

---

And finally, for more specific array/list usage examples do not hesitate to start with basic queries here at SO:

• [less] array
• [less] list loop
• and so on...