Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    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.