We continue on our LESS articles series, In our previous two articles you have read introduction of LESS and about its Variables. Here in article we learn about LESS Mixins, an extremely powerful component of LESS.

LESS Articles Details:

1. Introduction to LESS
2. Working with Variables
3. Working with Mixins
4. Working with Nested Rules
5. Working with Functions

So Let’s get started with LESS Mixins.

What is Mixins:

Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments. Here you will learn about regular mixins and parametric mixins.

Regular Mixins

In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. The regular mixins are simply a inclusion of properties from one another. So say we have the following class:

  1. .bordered {
  2.   border-topdotted 1px black;
  3.   border-bottomsolid 2px black;
  4. }

And we want to use these properties inside other rulesets. Well, we just have to drop in the name of the class in any ruleset we want to include its properties, like so:

  1. #menu a {
  2.   color#111;
  3.   .bordered;
  4. }
  5. .post a {
  6.   colorred;
  7.   .bordered;
  8. }

When the above code is compiled, the properties of the .bordered class will now appear in both #menu a and .post a:

  1. #menu a {
  2.   color#111;
  3.   border-topdotted 1px black;
  4.   border-bottomsolid 2px black;
  5. }
  6. .post a {
  7.   colorred;
  8.   border-topdotted 1px black;
  9.   border-bottomsolid 2px black;
  10. }

Any CSS class or id ruleset can be mixed-in that way. Now let’s take a look at Parametric Mixins.

Parametric Mixins

The 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. Here is the example:

  1. .border-radius(@radius: 6px) {
  2.     -webkit-border-radius:  @radius;
  3.     -moz-border-radius: @radius;
  4.     border-radius:      @radius;
  5. }
  6. .header {
  7.     .border-radius;
  8. }
  9. .sidebar {
  10.     .border-radius(12px);
  11. }

Which results in this output?

  1. .header {
  2.   -webkit-border-radius: 6px;
  3.   -moz-border-radius: 6px;
  4.   border-radius: 6px;
  5. }
  6. .sidebar {
  7.   -webkit-border-radius: 12px;
  8.   -moz-border-radius: 12px;
  9.   border-radius: 12px;
  10. }

So here we have covered mixins as regular mixins and parametric mixins. It was a shorter lessons but extremely useful if you practicing some on your own.

In the next LESS articles series, we’ll learn about LESS Nested Rules which is also a one of the most important in LESS.