Sass @extend lets one selector share another rule’s declarations. It adds the extending selector to the base rule’s selector list, avoiding duplicated static properties. section 12.2.1
Reuse a base image style
Define shared dimensions and object handling once, then extend that rule for each image: `.image-base { width: 300px; height: 300px; object-fit: cover; margin: 0 2rem; }`, followed by `img:first-of-type { @extend .image-base; }`. Sass outputs one grouped rule containing `.image-base` and the three image selectors. section 12.2.1
Choose @extend when shared values are static:
- Extending adds selectors to an existing rule rather than copying or generating declarations. section 12.3.3
- Mixins generate declarations and accept parameters, making them better for dynamic property values. section 12.3.3
- A loop can extend a shared `.callout` rule while generating separate success, warning, and error styles. section 12.5
