Extend directive là gì?

Chỉ thị extend (extend directive) cho phép bạn chia sẻ một tập hợp các thuộc tính CSS từ selector này sang selector khác. Chỉ thị extend (extend directive) rất hữu ích nếu bạn có các phần tử (element) được tạo style gần như giống hệt nhau chỉ khác nhau ở một số chi tiết nhỏ.

Trong ví dụ SASS bên dưới, đầu tiên tạo một style cơ bản cho các button (style này sẽ được sử dụng cho hầu hết các button). Sau đó, chúng ta tạo một style cho button "Report" và một kiểu cho button "Submit". Cả button "Report" và "Submit" đều kế thừa tất cả các thuộc tính CSS từ class .button-basic, thông qua chỉ thị extend (extend directive), ngoài ra chúng có các màu riêng

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

Sau khi biên dịch, CSS sẽ như bên dưới:

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  background-color: red;
}

.button-submit  {
  background-color: green;
  color: white;
}