Kết hợp các chuỗi bộ chọn trong @extend của SASS

Nếu chúng ta cần kết hợp các chuỗi bộ chọn, chúng ta cũng sử dụng chỉ thị @extend:

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

style.scss#main .list p {
  font-weight: bold;
}
#sub .resume .link {
  @extend p;
}

Hãy chú ý đến mã đã được biên dịch trong tệp css, khi kết hợp hai chuỗi không có bộ chọn chung thì các bộ chọn mới sẽ tự động được tạo ra: một với chuỗi đầu tiên đứng trước chuỗi thứ hai và một với chuỗi thứ hai đứng trước chuỗi đầu tiên:

style.css#main .list p,
#main .list #sub .resume .link, #sub .resume #main .list .link {
  font-weight: bold;
}

Trong trường hợp các chuỗi có bộ chọn chung, chúng sẽ được kết hợp lại với nhau và chỉ những phần khác biệt mới được xen kẽ (nếu có). Trong ví dụ tiếp theo, cả hai chuỗi đều có định danh #main:

style.scss#main .list p {
  font-weight: semi-bold;
}
#main .resume .link {
  @extend p;
}

Kết quả biên dịch, hai định danh này sẽ được kết hợp:

style.css#main .list p,
#main .list #sub .resume .link, #sub .resume #main .list .link {
  font-weight: bold;
}

styles.scssdiv p {
  font-size: 12px;
  padding-bottom: 4px;
}
link button #card-title {
  @extend p;
}