Learning LESS: Mixins

We continue on our journey of Learning LESS today as we dig into an extremely powerful component of LESS: Mixins. If you haven’t read our first two posts on the topic, check out Learning LESS: An Introduction and Learning LESS: Variables.

Blog Series Roadmap

1. An Introduction
2. Using Variables
3. Using Mixins
4. Using Nested Rules
5. Using Functions
6. Divide and Conquer
7. Put It Into Action

So let’s introduce LESS Mixins, and showcase some of what you can do with them.

What is a Mixin?

A Mixin in LESS is basically a common group of CSS properties grouped into one, which can then be inserted into various other LESS selectors. You can think of it like a variable, with several different properties.

Any ideas where this might come in handy? [Answer. CSS3.] And you’ll be very impressed at how powerful the mixins can be, as we have both Mixins and Parametric Mixins that can take a variable. You can also mixin Mixins with Mixins. And yes, I believe that is a grammatically correct sentence.

So starting with a basic Mixin, let’s create a scenario that you might use this in a web design project. Let’s say that the design you’re building uses a standard sans-serif font for the body copy, and a different serif font for headers. Instead of writing each font in each class (which could become cumbersome to manage if certain headers use different fonts), you can set the fonts within a mixin and include that class in other classes.

For this, we’ll create three classes, a serif class, sans-serif class and a monospace (code) class. Additionally, for the example, I’m going to throw in two variables which we learned in part two of our series. Let’s take a look at the code.

// Variables
@baseFontSize: 14px;
@baseLineHeight: 21px;

.serif {
	font-family: Georgia, 'Times New Roman', serif;
}

.sans-serif {
	font-family: Helvetica, Arial, sans-serif;
}

.monospaced {
	font-family: 'Courier New', monospace;
}

Pretty standard so far, right? By the way, the // denotes a comment in LESS and are not compiled with the LESS.app application. Standard CSS comments (/* */) will be compiled, but obviously not read. Let’s get into the meat ‘n potatoes of the Mixin.

Back to the code, check out how we format our paragraph tag.

p {
	font-size: @baseFontSize;
	line-height: @baseLineHeight;
	.serif;
}

As you can see, we set the font-size and line-height using the variables we defined, which are pretty self explanatory. We then set our font by just calling the class serif within the properties for the paragraph. This mixin acts very much like a variable. The .serif mixin stores all of the properties in “.serif” and when compiled, all of the properties are then included in the paragraph properties.

Let’s look at the compiled version.

.serif {
  font-family: Georgia, 'Times New Roman', serif;
}
.sans-serif {
  font-family: Helvetica, Arial, sans-serif;
}
.monospaced {
  font-family: 'Courier New', monospace;
}
p {
  font-size: 14px;
  line-height: 21px;
  font-family: Georgia, 'Times New Roman', serif;
}

The result of the compiled LESS is clean and streamlined CSS. What would happen if we simply changed the .serif to .sans-serif? So our LESS now reads:

p {
	font-size: @baseFontSize;
	line-height: @baseLineHeight;
	.sans-serif;
}

And our output becomes:

p {
  font-size: 14px;
  line-height: 21px;
  font-family: Helvetica, Arial, sans-serif;
}

That should give you a glimpse into how amazingly powerful making quick changes in LESS can be. But we’re not done yet, let’s take a look at Parametric Mixins.

Parametric Mixins

Parametric Mixins are just like regular mixins, but similar to functions they can accept parameters to attach to the code within the mixin. With these, you can set the parameter in your mixin or you can define a variable within your parameter for a default option.

This is perfect to use when you’re working with CSS3 properties and you need to declare your browser prefixes, but you can use the properties in different ways. For this example, we’ll use border-radius. Our mixin looks like this:

.border-radius(@radius) {
	-webkit-border-radius:	@radius;
	-moz-border-radius:	@radius;
	border-radius:		@radius;
}

.sidebar {
	.border-radius(4px);
}

So in our mixin, we include all of our CSS3 browser prefixes. We also set our parameter in the property that we’re mixing it into. So our output looks like this:

.sidebar {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

We can also set defaults for our mixin by including the specification within the original mixin. It’s easier to understand when you look at it. Compare the differences to the first parametric mixin. In addition, you can also set the size even if you have a default size set. It is this reason why I’d suggest always setting a default. That way, if you forget to define the parameter, you at least have something set as default. Here’s what the code looks like under both scenarios.

.border-radius(@radius: 6px) {
	-webkit-border-radius:	@radius;
	-moz-border-radius:	@radius;
	border-radius:		@radius;
}

.sidebar {
	.border-radius;
}

.sidebar2 {
	.border-radius(12px);
}

Which results in this output:

.sidebar {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.sidebar2 {
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}

Wrapping Up Mixins

So that covers the basics of mixins and parametric mixins. Please note though, we just scratched the surface of what you can do with these. Open up your code editor and play around with some. In an effort to make your development process modular and reusable, start to develop a library of mixins that you can reuse in your development projects.

If you missed any part of the series so far, please be sure to go back and read up on the introduction and variables.

Do you have any questions so far on mixins and LESS? Ask away in the comments!

See you next time when we cover nested rules. Thanks for reading.