Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
30 lines (17 sloc) 1.63 KB
---
layout: "post"
title: "Loops"
date: 2014-06-27
description: "Create loops, iterate through items or lists of items, use <code>for</code>, <code>each</code>, and <code>while</code> directives"
---
Loops are useful when you need to create a set of selectors/values that have an underlying mathematical relation of some sort.
## Basic loop
Let's build something simple - a very basic grid system with four columns.
We will put the columns class name and their number in variables and utilize them through [variable interpolation](/variables#interpolating-variables).
<%- @code('Loops', 'basic') %>
You will notice that Less offers two ways to write a loop, the first way is standard with a [mixin](/mixins#mixin-basics) that is later called. The second one is a bit hacky and much uglier, but doesn't require calling the mixin later.
In all of the preprocessors you can have both inclusive ranges and exclusive ones. For Less an inclusive range can be achieved with `=<` and for an exclusive one - `<`. In Sass inclusive ranges use `through` and exclusive - `to`. For Stylus inclusive ranges are written with `..` and exclusive - `...`.
## Leveling up
Often when you do a loop you want to iterate through something more than numbers, probably a list of colors or some other values. Here is an example of how you can create numbered selectors with values, extracted from a variable.
<%- @code('Loops', 'intermediate') %>
In addition to an index-based iteration, Sass can also iterate through values directly. As Sass [does not yet provide](https://github.com/sass/sass/issues/996) an index variable when iterating values, we have to retrieve it manually.