Sass @extend và kế thừa

Hướng dẫn Sass @extend

Câu lệnh @extend hướng dẫn @extend cho phép bạn chia sẻ một nhóm thuộc tính CSS từ một chọn lọc này sang chọn lọc khác.

Nếu bạn có các yếu tố có phong cách tương tự nhưng chỉ khác một chút ở một số chi tiết nhỏ, thì Câu lệnh @extend hướng dẫn rất hữu ích.

Ví dụ Sass dưới đây trước tiên tạo một phong cách cơ bản cho nút (phong cách này sẽ được sử dụng cho hầu hết các nút). Sau đó, chúng ta tạo một phong cách cho nút "Report" và một phong cách cho nút "Submit". Các nút "Report" và "Submit" đều thông qua Câu lệnh @extend Hướng dẫn @extend kế thừa tất cả các thuộc tính CSS của lớp .button-basic. Ngoài ra, chúng còn định nghĩa màu sắc của riêng mình:

Ngôn ngữ SCSS:

.button-basic  {
  vành đai: không;
  keo: 15px 30px;
  canh giữa văn bản;
  cỡ chữ: 16px;
  con trỏ: chỉ thị;
}
.button-report  {
  @extend .button-basic;
  màu nền: đỏ;
}
.button-submit  {
  @extend .button-basic;
  màu nền: xanh lá cây;
  màu: trắng;
}

Sau khi biên dịch, CSS sẽ như sau:

CSS đầu ra:

.button-basic, .button-report, .button-submit {
  vành đai: không;
  keo: 15px 30px;
  canh giữa văn bản;
  cỡ chữ: 16px;
  con trỏ: chỉ thị;
}
.button-report  {
  màu nền: đỏ;
}
.button-submit  {
  màu nền: xanh lá cây;
  màu: trắng;
}

Bằng cách sử dụng Câu lệnh @extend Bạn không cần phải chỉ định nhiều lớp cho các yếu tố trong mã HTML, ví dụ như:<button class="button-basic button-report">Báo cáo này</button>. Bạn chỉ cần chỉ định .button-report để nhận được hai nhóm phong cách.

Câu lệnh @extend Câu lệnh giúp giữ cho mã Sass của bạn rất khô (DRY).