Extend & Placeholders

%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; ... }