Learning LESS CSS – Mixins

Here I come up with the next article to this article series. This article is about Mixins in LESS CSS. So first let’s have a flashback of what we have covered so far.

Flashback

Till date we have covered Introduction of LESS CSS and in the second article we have covered the Variables in LESS CSS. In this article we will see about Mixins in LESS CSS.

What Are Mixins?

Let me take a quote from LessCSS official site for Mixin’s Definition:

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.

Mixins also work same as functions in any programming language. They takes parameter and can have default values also. First let’s have simple Mixins in LESS CSS.

Simple Mixins

Simple Mixins is just like a function without the parameters. You can place within the class and get the property described in the Mixins. Let’s have a look at example for the same. We will create a simple mixin to declare the margin and padding to zero.

[cc lang=”css”]

// LESS CSS Code
.margin-padding-zero()
{
margin:0px;
padding:0px;
}

div.container
{
.margin-padding-zero;
}

// Compiled CSS Code

div.container
{
margin:0px;
padding:0px;
}
[/cc]

Parametric Mixins

So far we have seen is simple Mixins which don’t have any parameters, hence with the fixed CSS values. But with the Parametric Mixins we can have this values dynamic just like functions with parameters.

We will create this Parametric Mixins for Text shadow property. For any text shadow property we will need four parameters which are h-shadow, v-shadow, blur and shadow color. We can have this things in parameters. Let’s have a look at below code block for the same:

When we want to use all the parameters which are passed then we just need to use [code]@arguments[/code], which considered as the all arguments. But if we want to deal with separate arguments the we can also.

[cc lang=”css”]
// LESS CSS Code

.my_text_shadow(@hs: 0, @vs: 0, @blur: 2px, @color: #FFF)
{
text-shadow: @arguments;
-moz-text-shadow: @arguments;
-webkit-text-shadow: @arguments;
}

h1
{
.my_text_shadow(2px, 1px, 1px, #000);
}

h2
{
.my_text_shadow(1px, 1px, 0px, #FC0);
}

// Compiled CSS Code

h1
{
text-shadow: 2px 1px 1px #000;
-moz-text-shadow: 2px 1px 1px #000;
-webkit-text-shadow: 2px 1px 1px #000;
}

h2
{
text-shadow: 1px 1px 0px #FC0;
-moz-text-shadow: 1px 1px 0px #FC0;
-webkit-text-shadow: 1px 1px 0px #FC0;
}
[/cc]

To use all arguments we can use @arguments in Mixin.

Conclusion

I hope you are now clear with the Different types of Mixins available in LESS CSS. Do cosider sharing this article because Sharing is Caring.

Facebook, Twitter