Có thể bao gồm các thuộc tính cha mẹ trong một lớp Sass mở rộng không?

Question

Tôi muốn thực hiện một cái gì đó giống như mô hình BEM trong thư viện Sass của tôi. Nhưng tôi đang đấu tranh để tìm một cách sạch sẽ để làm điều này.

Ví dụ, tôi muốn khai báo một kiểu 'cơ sở' cho một yếu tố chung, và sau đó mở rộng nó với các biến thể hữu ích:

.container { 
    margin: 10%; 
    background: #eee; 

    &-featured { 
    border: 2px solid #999; 
    } 

} 

Vấn đề ở đây là rằng tạo .container-featured lớp chỉ chứa các thuộc tính border — Sass không bao gồm lề và background từ lớp 'parent' của nó.

Vì vậy, bạn sẽ chỉ phải tăng gấp đôi lên trên lớp học trong đánh dấu của bạn để có được những kết quả mong muốn:

<div class="container container-featured"> 
    ... 
</div> 

Có một số cách để kéo các thuộc tính từ một lớp cha mẹ xuống mà lớp sửa đổi, vì vậy bạn có thể nhận được cùng một kết quả trực quan chỉ cần tham khảo lớp sửa đổi trong đánh dấu của bạn?

<div class="container-featured"> 
    <!-- has margin, background, and border styles via just modifier class --> 
</div> 

Tôi đã cố gắng sử dụng mixins để làm điều này, nhưng mọi thứ trở nên dài dòng và lặp đi lặp lại rất nhanh:

@mixins container { 
    margin: 10%; 
    background: #eee; 
} 

.container { 
    @include container; 

    &-featured { 
    @include container; 
    border: 2px solid #999; 
    } 

} 

Có một cách sạch sẽ đơn giản để đạt được điều này với Sass?

Answer 1

gì bạn đang tìm kiếm là các chỉ thị @extend. @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. Điều này có nghĩa là bạn chỉ cần sử dụng lớp container-featured.

Ví dụ

.container { 
    margin: 10%; 
    background: #eee; 

    &-featured { 
    @extend .container; 
    border: 2px solid #999; 
    } 
} 

biên dịch để:

.container, 
.container-featured { 
    margin: 10%; 
    background: #eee; 
} 

.container-featured { 
    border: 2px solid #999; 
} 

Answer 2

Giải pháp Colin Bacon là câu trả lời đúng cho câu hỏi. Nhưng liên quan đến phương pháp luận BEM, điều này không thanh lịch. Tôi đề nghị bạn sử dụng một cú pháp BEM khác.

HTML:

<div class="Container featured"> 
    ... 
</div> 

SCSS:

.Container { 
    margin: 10%; 
    background: #eee; 

    &.featured { 
    border: 2px solid #999; 
    } 
} 

Cú pháp:

• ComponentName
• ComponentName.modifierName
• ComponentName-descendantNam e
• ComponentName-descendantName.modifierName
• ComponentName.isStateOfComponent

Answer 3

Bạn nên sử dụng mixin trong BEM không Sass!

Kết hợp chỉ là việc sử dụng một số khối và/hoặc phần tử trên cùng một nút DOM.

Một nút DOM duy nhất có thể đại diện:

• vài khối b-menu b-head-menu
• một khối và một yếu tố của cùng một khối b-menu b-menu__layout
• một khối và một phần tử của một khối b-link b-menu__link
• các phần tử của các khối khác nhau b-menu__item b-head-menu__item
• một khối có công cụ sửa đổi và anothe r chặn b-menu b-menu_layout_horiz b-head-menu
• khối khác nhau với các hiệu ứng b-menu b-menu_layout_horiz b-head-toolbar b-head-toolbar_theme_black

Đọc thêm tại địa chỉ: http://bem.github.io/bem-method/html/all.en.html, phần Mixin.

Ngoài ra, bạn có thể sử dụng khối i (khối trừu tượng), vì vậy .container của bạn sẽ là .i-container, đọc thêm: http://bem.github.io/bem-method/html/all.en.html, phần Đặt tên quy ước.

Và với Sass bạn có thể thực hiện i-block như

<div class="container-featured"> 
    ... 
</div> 

%i-container { 
    // abstract block styles 
    margin: 10%; 
    background: #eee; 
} 

.container-featured { 
    @extend %i-container; 
    border: 2px solid #999; 
} 

Without Sass, mixin trong BEM được thực hiện như sau:

<div class="i-container container-featured"> 
    ... 
</div> 

.i-container { 
    // abstract block styles 
    margin: 10%; 
    background: #eee; 
} 

.container-featured { 
    border: 2px solid #999; 
}