Arrays with Less

by

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:

More Related Contents:

  1. Loop over an array of name value pairs in LESS
  2. Conditional CSS based on background color variable
  3. How to use if statements in LESS
  4. Multiple properties are getting treated as separate arguments in mixins
  5. Conditionally setting one variable’s value based on another
  6. Why I can see Less instead of CSS in a browser [closed]
  7. How to prevent Less from trying to compile CSS calc() properties?
  8. Loop through array of variable names in Less
  9. Is there a SASS.js? Something like LESS.js?
  10. Using variables in property names in LESS (dynamic properties / property name interpolation)
  11. How to thematize in lesscss
  12. Double border with different color [duplicate]
  13. import .css file into .less file
  14. Load less.js rules dynamically
  15. LessCss dynamic variables based on ancestor class
  16. How to use bootstrap with 16 or 24 columns
  17. Twitter’s Bootstrap 3 grid, changing breakpoint and removing padding
  18. Build list of selectors with LESS
  19. How do I extend a class/mixin which has dynamically formed selector
  20. LESS: Unrecognized input error when using Bootstrap
  21. LESS mixin a variable class name
  22. Concatenate strings in Less
  23. LESS CSS nesting classes
  24. Does LESS have an “extend” feature?
  25. Less CSS: Mixins with Variable Number of Arguments
  26. Prefixing all selectors for twitter bootstrap in less
  27. Media Query grouping instead of multiple scattered media queries that match
  28. Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?
  29. “Please try running this command again as Root/Administrator” error when trying to install LESS
  30. Font awesome not working in Firefox

Leave a Comment