SCSS Extend / Inheritance

SCSS extend lets you share a set of CSS properties from one selector to another. It is used with the help of '@extend'.

Code Structure:
.message{
  border: 1px solid #000;
  padding: 12px;
  color: #000;
}

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

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

Result:
.message, .success, .error{
  border: 1px solid #000;
  padding: 12px;
  color: #000;
}

.success{
  border-color: green;
}

.error{
  border-color: red;
}

Share this

Related Posts