Extend/Inheritance in SCSS: The Art of Keeping it DRY

@extend and inheritance in SCSS – sharing styles between selectors so you do not repeat yourself.

What is extend/inheritance?

Repeating the same CSS properties across multiple selectors makes code harder to maintain. SCSS’s @extend lets one selector inherit styles from another, cutting down duplication.

Basic usage of extend

Say several elements share common styling. Define the shared styles once, then extend them:

%message-shared {
  border: 1px solid #ddd;
  padding: 10px;
  color: #333;
}

.success-message {
  @extend %message-shared;
  background-color: #dff0d8;
}

.error-message {
  @extend %message-shared;
  background-color: #f2dede;
}

%message-shared is a placeholder selector (note the %). Both .success-message and .error-message inherit its styles and add their own background colours.

Placeholder selectors

Placeholder selectors (prefixed with %) do not compile to CSS on their own. They only exist to be extended by other selectors, which keeps the compiled output clean.

Extending within media queries

@extend works inside media queries too:

%flex-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar {
  @extend %flex-base;
}

@media (max-width: 600px) {
  .mobile-menu {
    @extend %flex-base;
  }
}

%flex-base styles are shared by both .navbar and .mobile-menu, with the latter inside a media query.

Extend vs mixins: when to use each

@extend and mixins look similar but serve different purposes. Use @extend when you want to share a set of styles without duplicating CSS output. Use mixins when you need dynamic values, or when the same styles must appear in different media query contexts.

Best practices for using extend

1. Limit scope: use @extend for small, simple groups of styles.
2. Organise your placeholders: keep placeholder selectors in a separate file if the project is large.
3. Understand the output: @extend can affect more selectors than you expect. Check the compiled CSS.

Extend in large-scale projects

On big projects, @extend can produce unexpected cascading if you are not careful. It keeps things DRY, but document your extensions and review the compiled output periodically.

Example in action

%flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header {
  @extend %flex-center;
  background-color: #333;
}

.footer {
  @extend %flex-center;
  background-color: #444;
}

Both .header and .footer share the flexbox centring from %flex-center, each with its own background colour.

@extend is a straightforward way to keep stylesheets DRY. Use it for shared patterns, check the compiled CSS, and prefer mixins when you need more flexibility.