A one-page @extend reference, every snippet explained line by line: extending classes and placeholders, what actually compiles out, the specificity catch, the media query limit, and when a mixin is the better tool.
@extend looks like the simplest of the SCSS reuse tools and is the easiest to misuse. The reason is a single fact that the syntax hides: it does not copy styles into each selector, it merges the selectors onto one shared rule. That is why the output stays small, and also why specificity and cascade order can end up somewhere you did not put them. This cheatsheet gathers the syntax, the compiled result and the failure modes on one page, each snippet annotated line by line. Keep it open while you build, or save the image and pin it nearby.
For the full background, read the guide to sharing styles between selectors with SCSS inheritance. To practise, work through the 10 code-along examples.
Hope this helps.
[…] SCSS Inheritance Cheatsheet […]