Learning Less.js

Exploring the syntax used by Less

Enough theory about installing! Let's move on and take a look at the syntax that makes up Less. Over the next few chapters, we will explore each part of the library in depth; before doing so, we will start with a whistle-stop tour through some of the more important parts of the library, beginning with variables.

Working with variables

If we need to write CSS styles, it's likely that we will include one or more styles that appear in multiple places. A great example is a number of shapes, where we might need to use the same value for borders or foreground colors:

.shape1 {
  color: #5cb100;
  border: 1px solid #5cb100;
}

.shape2 {
  background: #fff;
  color: #5cb100;
}
.shape3 {
  border: 1px solid #5cb100;
}

We could, as web ...