0Pricing
CSS Academy · Lesson

Extend and Placeholder Selectors

Share styles between selectors using @extend and silent placeholder selectors.

@extend in Sass

@extend lets one selector inherit all the styles of another. Instead of duplicating code, extending creates a shared rule set in the compiled CSS.

.error {
  color: red;
  border: 1px solid red;
}

.critical-error {
  @extend .error;
  font-weight: bold;
}

/* Compiles to: .error, .critical-error { color: red; border: ... } */

Placeholder Selectors

A placeholder selector (prefixed with %) defines a block of styles that is never compiled on its own — only when extended. It generates no CSS unless something extends it.

%card-base {
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

.product-card {
  @extend %card-base;
  padding: 16px;
}

.profile-card {
  @extend %card-base;
  display: flex;
}

All lessons in this course

  1. Variables Nesting and Partials
  2. Mixins and Includes
  3. Extend and Placeholder Selectors
  4. Sass Functions and Control Flow
← Back to CSS Academy