Arrays with less

Question

Using 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, cyan #81BABD, purple #AEA7CF;

Is there a way to create arrays with less?

Answer 1

The answer to the question is "Yes, you can create and work with arrays in Less." An array (in CSS, and therefore, to a lesser extent, is usually called a “list”) is defined using 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 iterate over such lists / arrays and access their elements.
• Also see this answer for some additional / less obvious properties of Less lists.
• . " " //.

---

Less ( ) CSS:

@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

---

- . " " "" ( /, .. "") .

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

@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);
    }
}

---

"Legacy Less" ( ):

// 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;  
        }
    }
}

---

, , /, , SO:

• [less] array
• [less] list loop
• ...

Answer 2

// 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 3

// 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;
}