Sass: When To Use @mixin And When To Use @extend

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?

Continue reading

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.

Continue reading

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.

Continue reading

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.

Continue reading

Sass: The @import Directive

One way to writer DRYer code is to separate concerns and keep related code in separate files. This allows you to maintain code in one file as opposed to maintaining the same code over several or many files.

Continue reading