Kiến thức cơ bản về Sass - bài 7 Mở rộng/Kế thừa - Extend/Inheritance
Lượt xem: 3264
Mở rộng/Kế thừa - Extend/Inheritance
Đây là một trong những tính năng hữu ích nhất của Sass.Sử dụng @extend cho phép bạn chia sẻ một tập các thuộc tính CSS từ bộ chọn này sang bộ chọn khác. Nó giúp giữ cho Sass của bạn rất KHÔ (DRY).
Trong ví dụ của chúng tôi, chúng tôi sẽ tạo ra một loạt tin nhắn đơn giản cho các lỗi, cảnh báo và thành công bằng cách sử dụng một tính năng khác đi đôi với các lớp giữ chỗ, mở rộng.
Lớp giữ chỗ (placeholder class) là một loại lớp đặc biệt chỉ in khi nó được mở rộng và có thể giúp giữ cho CSS được biên dịch của bạn gọn gàng và sạch sẽ.
Cú pháp SASS
/* This CSS will print because %message-shared is extended. */
%message-shared
border: 1px solid #ccc
padding: 10px
color: #333
// This CSS won't print because %equal-heights is never extended.
%equal-heights
display: flex
flex-wrap: wrap
.message
@extend %message-shared
.success
@extend %message-shared
border-color: green
.error
@extend %message-shared
border-color: red
.warning
@extend %message-shared
border-color: yellow
Cú pháp SCSS
/* This CSS will print because %message-shared is extended. */
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
// This CSS won't print because %equal-heights is never extended.
%equal-heights {
display: flex;
flex-wrap: wrap;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
.warning {
@extend %message-shared;
border-color: yellow;
}
Đầu ra CSS
/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
Những gì đoạn mã trên thực hiện là .message, .success, .error, & .warning để hành xử giống như %message-shared.
Điều đó có nghĩa là bất cứ nơi nào mà %message-shared xuất hiện thì .message, .success, .error, & .warning cũng vậy.
Điều kỳ diệu xảy ra trong CSS được tạo, trong đó mỗi lớp này sẽ nhận được các thuộc tính CSS giống như %message-shared.
Điều này giúp bạn tránh phải viết nhiều tên lớp trên các phần tử HTML. Bạn có thể mở rộng hầu hết các bộ chọn CSS đơn giản ngoài các lớp giữ chỗ trong Sass,nhưng sử dụng trình giữ chỗ là cách dễ nhất để đảm bảo bạn không mở rộng một lớp được lồng ở nơi khác trong các kiểu của bạn, điều này có thể dẫn đến các bộ chọn ngoài ý muốn trong CSS của bạn.
Lưu ý rằng CSS ở %equal-heights không được tạo, bởi vì %equal-heights không bao giờ được mở rộng.
Nguồn sass-lang.com