Using variables

Variables in Less help you to keep your files organized and easy to maintain. They allow you to specify widely used values in a single place and then allow you to reuse them throughout your Less code. The properties of the final style sheet can be set with variables. So, imagine that you don't have to search for every declaration of a specific color or value in your style sheets any more. How does all of this work? Variables will start with @ and have a name.

Examples of such variables include @color, @size, and @tree. To write the name of these variables, you are allowed to use any alphanumeric character, underscores, and dashes. This means that @this-is-variable-name-with-35-chars is a valid variable name.

Unfortunately, the use of @ is ambiguous in Less. As you have seen in the preceding chapter, parameters used by mixins also start with @. That's not all! As a valid CSS code is also a valid Less code, there will be CSS media query declarations that also start...