Extend & Placeholders

Code

%message {
  padding: 10px;
  border-radius: 4px;
  border: 1px solid transparent;
}

.success { @extend %message; color: green; border-color: lightgreen; }
.error   { @extend %message; color: red;   border-color: lightcoral; }
.warning { @extend %message; color: orange; border-color: #ffc107; }

// Compiles selectors together to avoid duplication:
// .success, .error, .warning { padding: 10px; ... }

Explanation

@extend shares styles by grouping selectors that share a base, producing compact output. Placeholder selectors (%name) stay out of the CSS unless extended. Use @extend for closely related variants; prefer mixins when arguments or independent output are needed.

More Sass Snippets