As with all good things, we must start somewhere—it seems like an opportune moment to ask ourselves a question: for those of you who are already familiar with the basics of programming, when is a variable not a variable? It's a constant—but hold on, this section is about variables, right...? If this seemed like double Dutch to you, then don't worry, let me explain.

Variables in Less are very much like the variables in most programming or scripting languages—they act as a placeholder for a value. Consider the following code:

#somediv { width: 200px; height: 200px; }

Instead of the previous code we could write this:

@width: 200px;
@height: 200px;

#somediv { width: @width; height: @height; }

This code will produce the same result.

You might ask yourself though, "Why write double the code for the same result?" Surely, we can simply use the first method, right?

Yes and no—on its own, this example isn't actually that effective. However—and this is where the big difference...