Tôi có cái này trong tệp SCSS của mình:
.class-a{
display: inline-block;
//some other properties
&:hover{
color: darken(#FFFFFF, 10%);
}
}
.class-b{
//Inherite class-a here
//some properties
}Trong lớp b, tôi muốn kế thừa tất cả các thuộc tính và khai báo lồng nhau của class-a. Làm thế nào được thực hiện? Tôi đã thử sử dụng @include class-a, nhưng điều đó chỉ gây ra lỗi khi biên dịch.
Câu trả lời:
Có vẻ như @mixinvà @includekhông cần thiết cho một trường hợp đơn giản như thế này.
Người ta chỉ có thể làm:
.myclass {
font-weight: bold;
font-size: 90px;
}
.myotherclass {
@extend .myclass;
color: #000000;
}@extend- có một số tác dụng phụ khó hiểu mà bạn nên biết: stackoverflow.com/questions/30744625/ chủ
.myclasskhông được sử dụng ở bất kỳ nơi nào khác (tôi cho là) ngoài ra .myotherclass, tốt hơn là nên .myclassxác định %myclassvà mở rộng .myotherclassthành @extend %myclass;. Nó sẽ tạo như.myotherclass{ font-weight: bold; font-size: 90px; color: #000000; }
Thử cái này:
Bây giờ bạn có thể mở rộng% lớp cơ sở trong bất kỳ lớp nào của mình (ví dụ: lớp .my).
%base-class {
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
.my-base-class {
@extend %base-class;
}
.my-class {
@extend %base-class;
margin-bottom: 40px;
}
Sử dụng @extend là một giải pháp tốt, nhưng lưu ý rằng css đã biên dịch sẽ phá vỡ định nghĩa lớp. Bất kỳ lớp nào mở rộng cùng một trình giữ chỗ sẽ được nhóm lại với nhau và các quy tắc không được mở rộng trong lớp sẽ có một định nghĩa riêng. Nếu một vài lớp trở nên mở rộng, nó có thể trở nên ngang ngược để tra cứu bộ chọn trong css đã biên dịch hoặc các công cụ dev. Trong khi đó một mixin sẽ nhân đôi mã mixin và thêm bất kỳ kiểu bổ sung nào.
Bạn có thể thấy sự khác biệt giữa @extend và @mixin trong sassmeister này
@extend .myclass;
@extend #{'.my-class'};
@extend #{'.my-class', '.my-other-class'};
Một tùy chọn khác có thể là sử dụng Bộ chọn thuộc tính:
[class^="your-class-name"]{
//your style here
}
Trong khi mọi lớp học bắt đầu bằng "tên lớp của bạn" đều sử dụng kiểu này.
Vì vậy, trong trường hợp của bạn, bạn có thể làm như vậy:
[class^="class"]{
display: inline-block;
//some other properties
&:hover{
color: darken(#FFFFFF, 10%);
}
}
.class-b{
//specifically for class b
width: 100px;
&:hover{
color: darken(#FFFFFF, 20%);
}
}
Tìm hiểu thêm về Bộ chọn thuộc tính trên w3Schools