Inheritance-scss

by Md. Mostafa Kamal

HTML

<div class="message">
 <h1>Welcome to hello laravel</h1>
</div>
<hr>
<div class="success">
 <h1>Welcome to hello laravel</h1>
</div>
<hr>
<div class="error">
 <h1>Welcome to hello laravel</h1>
</div>

SCSS

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: white;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}