Bao gồm một lớp trong SCSS

Question

Tôi có điều này trong tập tin SCSS tôi:

.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 hưởng công tất cả các tài sản 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.

Answer 1

Có vẻ như @mixin và @include không cần thiết cho trường hợp đơn giản như thế này.

Một chỉ có thể làm:

.myclass { 
    font-weight: bold; 
    font-size: 90px; 
} 

.myotherclass { 
    @extend .myclass; 
    color: #000000; 
} 

Answer 2

Sử dụng @extend là một giải pháp tốt, nhưng lưu ý rằng các css biên soạn sẽ phá vỡ các đị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ó định nghĩa riêng. Nếu một số lớp được mở rộng, nó có thể trở nên bất hợp lý để tìm kiếm một bộ chọn trong css đã biên dịch hoặc các công cụ dev. Trong khi mixin sẽ lặp lạ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 này sassmeister

Answer 3

Một lựa chọn khác có thể được sử dụng một thuộc tính Selector:

[class^="your-class-name"]{ 
    //your style here 
} 

Trong khi tất cả các lớp bắt đầu bằng "bạn-class-name" 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 điều đó 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%); 
    } 
} 

Thông tin thêm về Selectors Thuộc tính trên w3Schools

Answer 4

@extend .myclass; 
@extend #{'.my-class'}; 

Answer 5

Hãy thử điều này, tạo ra một lớp cơ sở giữ chỗ (% cơ sở-class) , mở rộng lớp cơ sở của bạn (% my-base-class) với trình giữ chỗ này. Bây giờ bạn có thể mở rộng% base-class trong bất kỳ lớp nào của bạn (ví dụ:% lớp học của tôi).

%base-class { 
    width: 80%; 
    margin-left: 10%; 
    margin-right: 10%; 
} 

.my-base-class { 
    @extend %base-class; 
} 

.my-class { 
    @extend $base-class; 
    margin-bottom: 40px; 
}