How To do Mixin in sass ?

  0 comments

Mixins allow you to define styles that can be re-used through the project.The mixins are very helpful if we need to change or calculate something in the final output. They can even take arguments which allows you to produce a  variety of styles with very few mixins.It is just powerfull features of sass that makes the styling easy.

Let take a example.In our project if we have to do the css of diffrent boxes that have a common property then..

Here is how the mixin works...

Sass image

Here we have simply created a mixin having some property like width,height and background and used that mixin by simply including it by using @include and the mixin name.After compiling  output look like as...

Sass_0 image

The mixin can accept the argument also...If we give argument when we include mixin then the mixin works depending that value. If we not supply the argument then it works  the default value that is given...

sass1 image

After compiling our css will be look like as...

About mixin

 

Add new comment