Back to Top

How to use Mixins in LESS CSS?

LESS CSS – Mixins

Today I will continue with next part of LESS series. In this series of LESS, you will learn about Mixins.

If you are new to the LESS series, the best starting point would be the Introduction of LESS CSS which gives basic idea about LESS and you can also read the previous article, where I have discussed about the variables.

What is a Mixin?

Mixins is a group of stylesheet which is used to reuse group of declarations into the other element of CSS.

Mixin Definition for Official site:

Mixins are a way of including (“mixing in”) a bunch of properties from one rule-set into another rule-set.

Mixin is kind of functions we are using in any programming language. Mixin also work with parameters which is known as parameterized Mixin.

First of all, lets understand the basic Mixin

Basic Mixin is just like a function without the parameters but it can not return value so you can’t say its a function but comparable to a function in programming language.

Let’s understand mixin by code:

.set_box-shadow() {
	-webkit-box-shadow:2px 2px 3px 3px #666;
	-moz-box-shadow:2px 2px 3px 3px #666;
	box-shadow:2px 2px 3px 3px #666;

Here, I have used box-shadow which have three properties with the same value.In regular CSS we write all three properties everywhere in where you want in css files or class whereas using Mixins,I have declared box-shadow values in set_box-shadow and you can use that properties everywhere you want in file.

This is simple example of mixins.Next, i will show you Parametric Mixins example.

Parametric Mixins

Parametric Mixins is same like simple Mixin but with the parameters.To declare parametric Mixin, use parentheses after the mixin name and write parameters in the parenthesizes.

Let’s understand it by example:

.set_box-shadow(@arguments:2px 2px 3px 3px #333) {
.addShadow {
	set_box-shadow(2px 2px 3px 3px #666);

Above, I have created a parametric Mixin for same box-shadow element.I have used @arguments parameter. Using parameter, you can set different value where you want in css. Here, I have used @argument and passed all values together, you can use multiple parameters and pass value separately.

That’s it we are done with the different types of Mixins in LESS.I just recommend that you implement this examples of LESS and i am sure you love it to use.

In the next article of LESS Series, I’ll look Nested Rules in LESS, one of the good feature in LESS.

Hope this article series helpful to you.As always, thanks for reading an article. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

The Readers’ Poll – November 2012

Posted on 6 years ago


Function handling Functions in PHP

Posted on 7 years ago


Django Tutorial for beginners

Posted on 3 years ago


The Readers’ Poll – July 2012

Posted on 7 years ago


Problem with German special character

Posted on 7 years ago


Hello world

Updated 1 month ago

Nick Carter

In depth Understanding of Laravel Core

Updated 3 months ago


ECMAScript 6 New Features – 2

Updated 1 year ago


The Reader’s Poll – June 2015

Posted on 4 years ago


The Reader’s Poll – August 2014

Posted on 5 years ago


The Reader’s Poll – June 2014

Posted on 5 years ago


The Readers’ Poll – May 2014

Posted on 5 years ago


The Readers’ Poll – August 2013

Posted on 6 years ago