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.
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.