Last updated on July 22, 2016
What is a Mixin?
A mixin allows you to create groups of CSS property declarations. It resembles a function, in the sense that you are allowed to pass values into it and it returns something. Let us look at a quick example of a mixin, then we will discuss how it functions:
See the Pen Sass Part 2 by Laszlo Lazuer (@Laszlo_Lazuer) on CodePen.
In this first example of a Sass mixin you can see the flexibility allowed by their implementation. If we look at the class .classOne, you notice there are no properties defined inside of the class itself. Instead we see @include mixin1(…);. We utilize the @include directive to call the mixin with the corresponding name. Within the parenthesis we pass in the parameters which match expected parameters for the mixin.
The mixin itself:
As you can see in the mixin declaration above, we have defined some properties within it. One interesting characteristic to note is that we have the properties such as you would in vanilla CSS, though instead of a value we have a variable in its place. The variable corresponds with the value defined in the mixin’s parameters. The passed in values are associated with their respective properties, and the properties with the given values are returned to the origin class. When we look at the processed CSS, we will see that the classes look as though the properties were defined inside of the class itself. The benefit lies in the benefit of writing DRY Sass. Rather than re-writing similar properties for multiple classes within one SCSS file, one can call a mixin with varying inputs for the distinct classes. We will look at an example of the flexibility provided by mixing, though first let us look at the SCSS -> CSS:
As can be seen in the image above, the mixin call passes in some values, the mixin returns the properties with the values and a CSS class is produced with the desired properties.
Mixin Versatility:
Now before we finish our intro to Sass mixin’s, let us look at an example of two different classes calling the same mixin:
See the Pen Sass Part 2: Second Mixin by Laszlo Lazuer (@Laszlo_Lazuer) on CodePen.
Looking at the Sass example above, we now have two classes classOne & classTwo calling our mixin1. Looking closely at our @include directives we notice the values are different. Thus this produces two classes which share similar properties with varying values. What this allows us to do is increase code readability, as well as keeping our SCSS files light. Lastly we will have a look at how this SCSS looks like once processed:
Closing remarks:
- If you would like to include a mixin, though you do not need all of the properties. It is valid to pass in null as a value, and whence processed the CSS will simply not have that property rendered.
- Mixin’s may also be utilized with defined properties and no parameters. In this case it will simply pull in the already defined properties into your class.
- The include directive must live at the top of your class, above any other properties.
- You may over-ride properties pulled in by the @include directive by re-defining them in the class. *CSS characteristic
Enjoy!
*Note: I just noticed, if you hover over the SCSS in the codepen examples a view compiled button will appear. This will display the processed CSS.