Sass @extend và Kế thừa
Chỉ thị Sass @extend
Lệnh @extend
cho phép bạn chia sẻ một tập hợp các thuộc tính CSS từ bộ chọn này sang bộ chọn khác.
Lệnh @extend
rất hữu ích nếu bạn có các phần tử có kiểu dáng gần như giống hệt nhau và chỉ khác nhau ở một số chi tiết nhỏ.
Ví dụ Sass sau đây trước tiên tạo kiểu cơ bản cho các nút (kiểu này sẽ được sử dụng cho hầu hết các nút). Sau đó, chúng tôi tạo một kiểu cho nút "Báo cáo" và một kiểu cho nút "Gửi". Cả nút "Báo cáo" và "Gửi" đều kế thừa tất cả thuộc tính CSS từ lớp .button-basic, thông qua lệnh @extend
. Ngoài ra, chúng còn có màu sắc riêng được xác định:
Cú pháp SCSS:
.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;
}
CSS sau khi biên dịch sẽ có dạng như sau:
Đầu ra CSS:
.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;
}
Bằng cách sử dụng lệnh @extend
, bạn không cần chỉ định một số lớp cho một phần tử trong mã HTML của mình, như sau: <button class="button-basic Button-report">Báo cáo điều này</button>. Bạn chỉ cần chỉ định .button-report để có được cả hai bộ kiểu.
Lệnh @extend
giúp giữ mã Sass của bạn rất KHÔ.