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.
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 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.
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 @arguments, which considered as the all arguments. But if we want to deal with separate arguments the we can also.
To use all arguments we can use @arguments in Mixin.
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.
Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.
View all posts by: Avinash