Reuse Styles with the SCSS @mixin Directive

Copy/pasting the same code is redundant and updating copy/pasted code slows development velocity. Mixins are reusable chunks of code that are included, similar to calling a function, instead of copy/pasted.

Mixins have some nice features:

  • Arguments just like functions.
  • Arguments can have default values and optional values.
  • Named arguments allow us to use optional and default arguments when the mixin is included.
  • Variable arguments allow us to have a dynamic number of arguments when the mixin is included.
  • The @content directive allow us to add additional styles when the mixin is included.

In this lesson we learn how to DRY up the code with the SCSS @mixin directive and make copy/paste a thing of the past.

Please take a moment to tell your friends:

You must be a PRO Member to view code