Speed Up Your Workflow with Loops in LESS and SASS

From creating integer based class variants to evenly spaced layouts; when it comes to speeding up your workflow, loops in less and sass provided the fastest way to perform repetitive task.

Getting started with LESS Loops

Loops in less aren’t exactly your conventional patterns, instead its a bit of a work around combining a mixins, guard expressions and pattern matching to simulate loops.

LESS Loop

.star-gen(@i) when (@i > 0){
     .star-gen((@i - 1));
     .star-@{i}{
          background: url(stars.png) repeat-x;
          width: (10px * @i)
     }
}

.star-gen(5);

Compiles into

.star-1 {
  background: url(stars.png) repeat-x;
  width: 10px;
}
.star-2 {
  background: url(stars.png) repeat-x;
  width: 20px;
}
.star-3 {
  background: url(stars.png) repeat-x;
  width: 30px;
}
.star-4 {
  background: url(stars.png) repeat-x;
  width: 40px;
}
.star-5 {
  background: url(stars.png) repeat-x;
  width: 50px;
}

The first line .star-gen(@i) when (@i > 0), functions as both creating a mixins as well as our guard expression. By declaring when (@i > 0) we limit our mixins to only evaluate when the variable i is greater then 0.

The second line .star-gen((@i – 1)); is responsible for iterating through our loop. Placing it above the rest of our logic creates a loop in order from 1 to 5. To reverse the order, simply place or iterator after our logic.

You’ll notice we create a class “star-@{i}”, when you look at the compiled code you’ll notice that it is converted numbers. When using our number variable for the width we use the @i instead.

The final step is to actually call the mixin and pass along the number you want to iterate with. In this case we pass the .star-gen() mixin the number 5.

SASS Loops

SASS has a number of ways for us to loop through data including @for, @while and @each, all with their own benefits and a more familiar syntax for developers.

@For Loops with SASS

The for directive allows for setting the length of the the loop from start to finish.

When using the for loop you have a choice between two variations

to and through.

@for $i from 1 to 5 {
  .star-#{$i} {  width: 10px * $i;  }
}

@for $i from 1 through 5 {
  .starr-#{$i} { width: 10px * $i; }
}

The difference is how the integers are evaluated, using the keyword “to” loops from the start <1> to <end> not including the end number. In our example the “to” version would compile from 1-4 items. The through key word gives you both start and end values so our loop would be 1-5. Take not that creating our @for loop invokes it, no need to call it later;

Compiles to

.star-1 {
  width: 10px;
}

.star-2 {
  width: 20px;
}

.star-3 {
  width: 30px;
}

.star-4 {
  width: 40px;
}

.star-1 {
  width: 10px;
}

.star-2 {
  width: 20px;
}

.star-3 {
  width: 30px;
}

.star-4 {
  width: 40px;
}

.star-5 {
  width: 50px;
}

@While Loops

The while loop directive allows for iterating until a condition is false and is not limited to just numbers. To get started, provide a variable, condition and a way to update that condition.

$x: 6;
@while $x > 0 {
  .move-type-#{$x} { width: 2em * $x; }
  $x: $x - 3;
}

In the above example, we create a variable $x and set the value to 6. Our while loop contains the condition if x is great then 0, which will allow our while loop body to evaluate as long as the condition is true. Very important, $x: $x – 3; give us the ability to change the value of x and allow for changing the condition. Be sure that the while loop will eventually end, other wise you will get an infinite loop.

Compiles to

.move-type-6 {
  width: 12em;
}

.move-type-3 {
  width: 6em;
}

Final Thoughts

When it comes to coding styles, loops are very beneficial. LESS provides a unique alternative approach to looping by using mixins and mixin guards. SASS provides you with a more familiar set of loops, @for, @while and @each, all of which you can use to iterate with known techniques. The for loop allows you to go from A to Z, where as @while loops let you iterate until a condition is false.