Mixins are ways to reuse styles across your project and their ability to take arguments makes them very powerful and flexible. The @extend directive allows you to reuse styles by letting one selector inherit those of another. In some respects they both do the same thing so which one should you use?
Category: CSS
Sass: The @mixin Directive
Being able to reuse code across a project has benefits in maintenance and development efficiency. So far in this series, I’ve talked about the @import and @extend directives and both help to make your code more reusable. Sass also offers the @mixin directive as a means for reusing code.
Sass: Placeholders and @extend-Only Selectors
Sass’ @extend directive allows one selector to inherit the styles of another and it does so in a way that produces DRY CSS code. When combined with placeholders you can further abstract your code so that some styles are compiled only when extended and used in another selector.
Sass: The @extend Directive
Have you ever wanted one selector to inherit the styles of another? Maybe you have a .button class for standard buttons across the site and now you want to create a larger button that should be styled the same as the rest of your buttons, except it should be larger.
Sass: Directory Structures That Help You Maintain Your Code
As projects grows larger, the need to modularize directory and file structure increases. This is particularly true if you want to create code that can be used in other projects, in components and patterns across one or more projects, or in templates you share with others.