Working with lists

In Less and CSS, list is a comma or space-separated collection of values. The length() function returns the number of elements in the list, while the extract () function will give you the value of a given position in the list.

Getting ready

In this recipe, you will learn how to use the extract() and length() functions with CSS lists. To demonstrate these functions, a mixin guard will be used to create a loop with recursion. You can read more about loops with recursion in the Using mixin guards recipe in Chapter 6, Advanced Less Coding. You can use the client-side less.js compiler or the command-line lessc compiler, as explained in Chapter 1, Getting to Grips with the Basics of Less, to compile the Less code.

How to do it…

1. Write and compile the following Less code:

   @sizes: "small","medium","large";
   .build(@number) when (@number > 0) {
     .build(@number - 1);
     @class: e(%(".%s",extract(@sizes, @number)));
     @{class} {
       width: 100px * @number;
     }
   }
   .build(length(@sizes...