Lazy loading of variables in Less

So far, we've covered a number of techniques to create and control how styles are applied. There is one key theme that runs throughout all of this though and of which you need to be aware: scope.

Yes, there's that ugly word, scope! No matter how much we try to avoid it, we must always allow for it when using Less; if not, it can come back to bite us at the most unexpected moments. Let me explain what I mean: as we will see in the upcoming exercise, we can always reuse our mixins or variables throughout our Less code.

The downside is that Less must have a means of knowing which instance is the most latest; therefore, it always takes the last instance of any variable or mixin that is included in our code. If you're not careful, it can lead to some odd effects. Let's take a look at what this means in practice, with a quick exercise.

Start by opening a copy of project.html that we created back in Chapter 3, Getting Started with Less, and then...