Redeclaring variables based on lazy loading

When working with variables in Less, you have to realize that the last declaration wins and that Less uses lazy loading. The theoretical aspect of lazy loading is that the variables are initialized at the point at which they are used. Coding Less means you can use variables before you declare them. You can declare these variables later. When you declare a variable with the same name twice, the last declared value will be used everywhere in your code.

Getting ready

For this recipe, you will have to create an example.less and index.html file, which load the Less file and less.js compiler with the following code in the head section:

<link rel="stylesheet/less" type="text/css" href="example.less">
<script src="less.js" type="text/javascript"></script>

How to do it…

The easiest way to understand both the last declaration wins rule and lazy loading is to perform the following steps...