Advertisement
  1. Web Design
  2. LESS
Webdesign

Understanding the LESS Loop

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called LESS: Beyond the Basics.
Creating Color Schemes with LESS Color Functions
How to Use Source Maps for Better Preprocessor Debugging

In this tutorial, we will comprehensively cover the LESS loop (coupled with a few other LESS features which we have discussed in previous posts, such as Mixins Guards and Color Functions). Looping is a real helpful feature in LESS and it allows us to automate many repetitive styling tasks.

Looping in LESS

“Loop” is a programming method which repeats (or iterates) a function. Typically, it’s used for processing a list of data. If you have experience with any other programming language, you’ll certainly have encountered a loop before.

In LESS, the basic syntax would look a little like so:

We define a LESS loop in a similar way to how we define Mixin Guards, but this time we nest a LESS function that will increment the passed parameters: .loop( @parameters + 1 ). Depending on the scenario, the function may also be a decrement: .loop( @parameters - 1 ). The function will loop and iterate as long as the condition: when ( @condition ) is matched.

Let’s see how we can use a loop in real world examples.

List and Length

Let’s assume we want to create an alert box, so we define the base styles; some padding and a border. We would like to create several variations of the alert box to convey different types of alert. You may, for example, have a red alert box to show an error, or green to report a success. With a loop, we can make setting out these styles pretty convenient.

To begin with, set out the list of colors and name variations of the alert box. Then count the number of variations using the length() function.

Now we define the loop to carry out the list:

As you can see above, our loop is called .alert-variation, and it requires some parameters:

  • @names: we will use this variable to pass on the list of alert name variations.
  • @colors: this variable will pass the color codes of each respective name on the @nameslist.
  • @index: this variable will pass the number of names and colors we have within the list, and which we will also use for iterating the loop.

Conditions

We have also defined a condition upon which to run the loop. The first condition we set in the above example will evaluate whether the values passed into the @colors are real colors instead of arbitrary values (in which case we will abort the loop). The next condition set will stop the loop when the @index decrement has reached 0.

Rule Definition

Next, we define the rules that make up the styles.

Since we’re using a list that carries the alert box colors, we will need to use the LESS extract() function to retrieve the corresponding color and name within each iteration of the loop. Then, we append the name as the class selector, while the color is applied to the border, color, and the background-color properties.

Go!

We are all set and ready to use the loop with the inputs:

We have a list of four colors along with a list of their respective names in the @names variable. The iteration of our loop starts from the 4th color of the list and goes down to 0 as we decrement the @index in each iteration. For each iteration, the loop will generate the class name and the style rules variation, hence this example compiles into:

You can add more into the list, and the loop will compile it into a new variation in a snap.

You can also apply similar approach to create a style pattern of other UI elements on your website such as the Buttons, or (perhaps) the brand colors of your network site.

Building a Responsive Grid System

The web is brimming with CSS frameworks–and though some of them are designed to be “one size fits all”, in reality that may not always be the case. Quite often, you might only need the responsive grid. So why not create your own?

Loops make creating grid classes less of a hassle. The following is a simple loop which generates the column class names and determines the width percentage of each one:

Notice that we’re now performing an increment within the loop. For this reason, we set the loop condition with (@index =< @columns) (“while the index is less than or equal to the number of columns”) to prevent the iteration exceeding the column number.

Use this loop by passing the name for the generated class selector and the column number of the grid. When it comes to naming it’s entirely up to you, though you might want to follow the Bootstrap convention of col-sm, col-md, and col-lg or perhaps small, medium, and large following the Foundation pattern, like so:

Here we’ve used our .grid() loop and passed to it the values small and 12. This will compile into:

Floating

As you can see above, our loop currently generates only the columns’ width. We also need to float these columns, and there are a number of ways to do so. For example, we can add a class selector, say .column, nest it under the @media query definition, and “extend” it within the loop.

Take a closer look and you will find that we’ve defined the :extend syntax under a Mixin Guard. This will ensure the .column selector only applies to the 1st through to 11th column, as we expect the 12th column to span fully without the float interference.

The loop will generate the following output when compiled:

Further Customization

If needed, you can also customize the loop to generate classes for pushing columns to the right. In Bootstrap, this is known as offsetting. Again, we won’t generate this for the 12th column since offsetting the column by 100% would likely be impractical.

Our loop should now generate a set of new classes when compiled:

Final Thought

For some, the idea of the loop may not be easy to grasp to begin with. And that’s quite normal; it took me some time before figuring out what to do with loops. Hopefully this tutorial will give you a good start. Here we have shown how to generate UI style patterns quickly. We’ve also learned how to create our own grid system, so that we can be more conscious over the styles on our website instead of blindly adding code bloat with a framework we don’t need.

Feel free to read this tutorial a couple of times to find out how leverage the loop and make your CSS style authoring more efficient.

Further Resources

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.