1 minute

Build a Responsive Grid System in LESS with Recursive Mixins

4 Comments

Ever wanted to build your own responsive grid system? It’s easier than you think. LESS has a feature known as recursive mixins, which can generate code that we’d otherwise have to type by hand. A recursive mixin acts as a loop, executing a snippet of CSS until a stopping point is reached.

In this video tutorial, we will cover the fundamentals of recursive mixins. We’ll start by building a simple example and then go into something a bit more complicated. There’s a bit of math involved here to create a responsive grid system, but again … it’s easier than you might imagine.

There’s even a GitHub repo to accompany the video!

Responsive Grid with Recursive Mixins

What you will learn in this tutorial: How to build a responsive grid system in LESS using recursive mixins, which keeps you from having to generate code that is typed by hand, and simplify your LESS code.

Video run time: 9 minutes

David East

David East is a Developer Programs Engineer for Google, working on Firebase in San Francisco. He's a die-hard JavaScript fan and a budding iOS developer. He also likes waffles. If you like to write code—or eat waffles—follow him on twitter: @_davideast.

Posts by David East

Animated Presentations Made Easy

Learn more All Products
Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree