Liked on YouTube: How to use mixin include and extend in scss

How to use mixin include and extend in scss

SASS provides two main ways to reuse styles — @extend and mixins — this article is a brief look into how both work and which to use. TLDR: @extend with/without placeholders are best when you have shared static, similar styles but they cause duplicate classes while mixins are best for dynamic styles which uses passed arguments but they lead to repeated declarations. @extend The extends syntax allows you to share styles between two selectors. It’s analogous to the way classes are combined in HTML. Using @extend , this can be written as: .h1-heading{ font-size:30px; } content{ @extend h1-heading; color:red; } Mixins Mixins are quite similar to extends, for example, using mixins, we could have done this: @mixin webfont() { font-family: webfont, sans-serif; font-weight: 700; } ... .foo { @include webfont(); } ... .bar { @include webfont(); } Generally, if you don’t have dynamic styles, using @extend (preferably using placeholders — unless you are referencing the class in the DOM) is good enough. Using mixins for static-only styles causes unnecessarily bloated stylesheets so it’s a good idea to keep the declarations minimal and only for dynamic declarations because it’s going to be duplicated.
via YouTube https://youtu.be/qOVIwvjfYcQ