Instructor: We have two buttons. One is written in Sass, the other one is using css-in-js. Let's have a look at the Sass implementation. We are using include directive here, and we are using a mixin.
Button size mixin accepts padding, font size and border radius. Let's have a look at this mixin. Button size mixin uses the arguments in order to implement padding, font size and border radius.
Why are we actually using a mixin in here? Mixin is a reusable piece of code. If we want to add another button with a different button size, we can simply pass different arguments to the button size mixin.
For instance, we could create a button small and pass different sizes to this button. Let's have a look at the css-in-js button. As usually, we import variables, and we also import mixins.
Let's have a look at the mixin function. We use an arrow function expression in order to create our function. Basically, we declare a constant, and we assign an arrow function to this constant.
We declare some properties, and we use arguments inside of interpolations. This declaration block can be mixed in into some other declaration block. What we saw inside of the mixin, we'll use the variables we pass in here, and will be inserted in this declaration block.