Book Image

Less Web Development Cookbook

Book Image

Less Web Development Cookbook

Overview of this book

Table of Contents (19 chapters)
Less Web Development Cookbook
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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:

  1. Write the following code into the example.less file:

    @color...