Chuỗi mở rộng (Chained Extensions) trong @extend của SASS

Chỉ thị @extend cũng hỗ trợ mở rộng theo chuỗi (tuần tự), tức là một bộ chọn có thể được mở rộng bởi một bộ chọn khác, bộ chọn đó, đến lượt nó, lại được mở rộng bởi một bộ chọn thứ ba. Ví dụ:

Hãy xem xét ví dụ:

style.scss.warning {
  border: 1px solid;
  background-color: #ffd900;
}
.personalWarning {
  @extend .warning;
  border-width: 3px;
}
.systemWarning {
  @extend .personalWarning;
  position: center;
}

Như chúng ta thấy từ kết quả biên dịch, tất cả các phần tử có lớp .systemWarning cũng có kiểu của các lớp .warning và .personalWarning:

style.css.warning, .personalWarning, .systemWarning {
  border: 1px solid;
  background-color: #ffd900;
}
.personalWarning, .systemWarning {
  border-width: 3px;
}
.systemWarning {
  position: center;
}

styles.scssdiv {
  font-size: 10px;
  color: #181402;
}

.main-block {
  @extend div;
  border: 2px solid orange;
}

#warning-text {
  @extend .main-block;
  margin-top: 10px;
}   

styles.scssp {
  padding: 10px;
}

.main-text {
  font-weight: 800px;
}

.card {
  @extend p;
  color: #021338;
}

.product-card {
  @extend .card, .main-text;
  font-size: 12px;
}

styles.scssp {
  padding: 5px;
}

.main-text {
  @extend p;
  font-size: 14px;
}

.card {
  @extend .main-text;
  border: 1px solid black;
}

.product-card {
  @extend .card;
  background-color: #e1f1f1;
}