Learning LESS: Mixins

Alex Ball continues on his journey of Learning LESS, as he digs into an extremely powerful component of LESS: Mixins. 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. If you haven’t read the first post on the topic, check out Learning LESS: Variables.

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, Alex Ball will create three classes, a serif class, sans-serif class and a monospace (code) class. Additionally, for the example, he is going to throw in two variables which you learned in part one of his series.