Use JavaScript Functions as Mixin Directives for CSS-in-JS Style Declarations

Mixins are reusable pieces of code that allow you to group CSS declarations together. If we want to add another button with different button sizes, we can simply pass different arguments to a button size mixin that will format our the variables passed in into valid CSS.

You will learn how to use JavaScript functions as an alternative to @mixin directive. Also we will learn how a function can become a CSS mixin.