1
HTML/CSSBeginner#css#tailwind
HTML/CSSAdvanced#css#sass
What is the difference between a Sass mixin and a placeholder/extend?
@mixin with @include duplicates the CSS rules into every place it's used, giving flexibility with arguments. @extend with a %placeholder groups all selectors sharing the styles under one rule in the output, reducing file size but coupling unrelated selectors together.
Example
%button-base { padding: 10px; border-radius: 4px; }
.btn-primary { @extend %button-base; background: blue; }
.btn-secondary { @extend %button-base; background: gray; }
@mixin shadow($x, $y) { box-shadow: $x $y 4px rgba(0,0,0,0.2); }
.card { @include shadow(2px, 2px); }