Nguyên tắc hoạt động của kế thừa trong SASS

Bản chất của việc chỉ thị @extend hoạt động là nó thêm bộ chọn đang được mở rộng vào bất kỳ tập hợp kiểu nào, nơi có bộ chọn được mở rộng (trong ví dụ của chúng ta là .warning):

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

style.scss.warning {
  border: 1px solid;
  background-color: #ffd900;
}
.warning .instruction {
  background-image: url("/image/warning.png");
}
.personalWarning {
  @extend .warning;
  border-width: 3px;
}

Bây giờ hãy xem kết quả biên dịch:

style.css.warning, .personalWarning {
  border: 1px solid;
  background-color: #ffd900;
}

.warning .instruction, .personalWarning .instruction {
  background-image: url("/image/warning.png");
}
    
.personalWarning {
  border-width: 3px;
}

styles.scss#product-card p{
  color: #460707;
  padding: 10px;
}

#product-card-title {
  @extend #product-card;
  font-weight: 600px;
}

styles.scss.link .main-block{
  font-size: 14px;
  text-decoration: dashed;
}

.active-link {
  @extend .link;
  color: red;
}

styles.scss.link .main-block{
  font-weight: bold;
  text-decoration: none;
}

.active {
  color: red;
}

.active-link {
  @extend .link;
  @extend .active;
}