4.7 Day 7: Mixins

Welcome to the last day of this course, number 14. Where you'll learn about mixins. These basically allow you to create reusable styles. So, let's begin. Mixins are defined using the mixin directive. So, you would start with this, Mixin. And let's give it a name, for example, featured. And let's set some styles inside this. We give it font size, font weight and the border color. Now, let's say you have a section that has just some traditional CSS, maybe padding, margin, and stuff like that. So, we're just gonna say regular section CSS here and then you want these styles. Well, you can simply do, include featured. And this will compile to section and the styles from the mix-in. Now, you might say, well I can do this very well with the extend directive. Just by defining another class. Well, yes that's true but, mix-in's allow you to do some more complex things. Like receive arguments. So, for example, I can have a mix-in called rounds, that receives the parameter of radius. And then what I can do, is I can set border-radius to radius. So, then I can go on and do something like button and I can do include round(5px). And this will, whoops. This will compile to button or to radius five pixels, which is very, very cool. If I change this to two m's, it's gonna compile to two m's. Now, I can also set default values for these arguments. Just by declaring them has any another variable. So, for example, I can do, I can say that if I dont receive a value for this mix-in, I can set the radius to be 10 pixels out of the box. So, for example I can do another button. And I can simply do, include rounds and this will be compiled to border radius. Ten pixels. Now, mix-ins can also include selectors. So, for example, I can have a mix-in called border-box. That contains a selector and some properties. For example, box sizing, border box. And then what I can do is, I can also include a mix in in the root level of my document. So, I can say, include Border-box. And this will compile to this bit. Now, in mix-ins you can also use something called variable arguments. So, for example, if you think about the box shadow property, it can have multiple values. Not just one. So, you can't really tell whether or not you should include one argument, two arguments, and so on. So, what you can do, for example, let's create a mix-in here, called box-shadow. Where you would do args and then followed by Three dots. And in here you can say something like, webkit-box-shadow args. And then the non-prefixed version, box-shadow args. All right, so what you can do now is for example, element. You can do include box-shadow. And you can do a single shadow. For example, 1, 1, 5, 0 and maybe a color. And this will compile to this bit. Or, you can have element number two. Where you can include multiple shadows. Like this. And this will be compiled to it's correct CSS four. Now one thing you should note here is that mix-ins can also include other mix-ins. So for example, if I were to include in this round mix-in for example. If I want to include the featured mixin, I can do that very easily. Include [SOUND] featured. And this will compile to the button for example, that only included round to also have the styles from featured. That you can see here. And that's what you need to know about mix-in's. Now, for the exercise, you have a CSS file and your task is to write mix-in's for the following CSS properties, Gradient, Rotate, and 3D Transforms. Good luck. And that's it for make sense and in fact, for the 14 days. Please join me next time for the conclusion