Advanced Sass: Loops

Sass is an extremely powerful language and one which I use extensively in virtually every project I undertake. For the most part, it is non‑invasive: you can write vanilla CSS within Sass and it will work absolutely fine. One step up from there, developers can make use of its nesting structure, @extends and variables to enhance their CSS and make development quicker and more convenient.

As time passes, more modern CSS specifications start to make certain aspects of Sass a little more obsolete; for example, CSS variables have been around for a long while and ‑ unless you need to support older browsers (which a lot of us do) ‑ are just as useable as the Sass version. Nevertheless, for the simplicity of developing stylesheets and knowing that you don't have to worry about older browser support or vendor prefixing, Sass is extremely valuable. As a tool to aid in more complex platform architecture, it is entirely unchallengeable.

Today, I'd like to discuss a more advanced portion of Sass, the three different types of loops that Sass makes possible (and without which, vanilla CSS has no viable alternative).

while

The while loop in Sass is useful for a good number of instances. For example, if you need to prepend dynamic list items with a number, it's possible to do that via JavaScript, React or even PHP, but it's also straightforward and easy to do with Sass:

$count: 0;@while $count < 5 {  .list-item-#{$count} {    &:before {      content: '#{$count}';    }  }  $count: $count + 1;}

This will generate five classes (.list‑item‑1 to .list‑item‑5), each with a before pseudo‑element containing their respective number, like this:

.list-item-1:before {  content: 1;}.list-item-2:before {  content: 2;}.list-item-3:before {  content: 3;}.list-item-4:before {  content: 4;}.list-item-5:before {  content: 5;}

for

In Sass, the for loop is very similar ‑ if not actually identical ‑ to the type of for loop you will be familiar with from other languages:

@for $count from 1 through 10 {  $width: percentage(1 / $count);  .column-#{$count} {    width: $width;  }}

In this example, the output would be a set of Bootstrap‑type layout elements with the classname .column‑1 through to .column‑10, each with a corresponding width. Although this is only a simple example, it would allow for easy and quick layout creation without needing to pull in an entire framework like Bootstrap to get the job done.

Obviously, there are plenty of other ways to utilise for too.

each

each loops in Sass function by pulling in a list (similar to an array in any other language), and iterating over each item. For example:

$list: triangles squares polygons circles;@each $background-image in $list {  .background-#{$background-image} {    background: image-url('backgrounds/#{$background-image}.png')      50%      50%      no-repeat;    background-size: cover;  }}

In this example, we're using an each loop to iterate over a list of elements, outputting corresponding classnames and background images. A generated class would look like this:

.background-triangles {  background: image-url('backgrounds/triangles.png') 50% 50% no-repeat;  background-size: cover;}

Sass loops are a very handy way to help maintain DRY code, lowering the amount of time you have to spend writing repetitive styles and selectors and allowing you to get into the meatier stuff sooner.

These loops also make updating with new selectors and styling a little easier: for instance, if you wanted to add a new background style into our each loop example above, you would just have to add the filename to the list, rather than having to write three or four new lines of CSS.

If you are familiar with the fundamentals of other languages, the syntax for each of these loops should feel simple and straightforward, which means you don't have to make a time investment up‑front for rewards later on; it is easy to get up and running!