Variables and Mixens

Variables & Mixens are two of ways that {less} makes it faster and easier to develop and maintain your CSS styles.

What is a Variable

Variables store a CSS value. This value can then be used in numerous rules, and for different properties.

Variables are probably one of the most requested items in CSS, especially by front end designers who have a little experience with programming.

If you've ever written CSS, you have probably had numerous selectors that used the same color, thickness, etc. And you probably know the pain of running into a situation where you had to find and modify each of those values when a design aspect was changed. With {less} variables, this becomes much easier.

Consider the CSS code (expect over thousands of lines of code like this):

.class1 {
	background-color: #143352;
}
.class2 {
	background-color: #fff;
 	color: #143352;
}
.class3 {
	border: 1px solid #143352;
}

In {less} we define a value that get's used over and over again. Such as:

@color-base: #143352;
.class1 {
	background-color: @color-base;
}
.class2 {
	background-color: #fff;
 	color: @color-base;
}
.class3 {
	border: 1px solid @color-base;
}

Now we just have to change one value in one place, and all of the values get updated.

Mixens

Why Use a Mixen?

A mixen is good when several elements will repeat a design element. Like a border style, radius, etc.

Mixens are kind of like variables, expect instead of storing a value, it stores one or more properties and their values.

Mixens are in some ways more powerful, but also a little less flexible, because they combine both the property and the value. This is because it lets you embed a CSS rule in another rule.

This is great if you have a design element that gets repeated. However, it does require a bit more fore-thought to ensure that it will work for you.

Consider the following example with a border radius.

.roundedborder {
	border-radius: 10px;
}

.nav a {
	.roundedborder;
	color: #FFF;
	background-color: #000;
}