Reuse Styles with the SCSS @mixin Directive

Ari Picker
InstructorAri Picker

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 3 years ago

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.

Benjamin
Benjamin
~ 4 years ago

mixins are a little too complicated to teach at 4000mph