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