Czy możliwe jest uwzględnienie właściwości nadrzędnych w rozszerzonej klasie Sass?

Question

Chciałbym zaimplementować coś podobnego do modelu BEM w mojej bibliotece Sass. Ale walczę, aby znaleźć czysty sposób na zrobienie tego.

Na przykład, chciałbym zadeklarować „bazy” styl wspólny element, a następnie rozszerzyć ją przydatnych odmianach:

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

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

} 

Problemem jest to, że generowane .container-featured klasa zawiera tylko właściwość border-Sass nie uwzględnia marginesu i tła z klasy "rodzica".

więc skończyć się konieczności podwoić o zajęciach w znacznikach, aby uzyskać pożądane rezultaty:

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

Czy istnieje jakiś sposób, aby wyciągnąć właściwości z klasy nadrzędnej w dół do tej klasy modyfikatorów, więc może uzyskać ten sam efekt wizualny, odwołujący się do klasy modyfikującej w twoim znaczniku?

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

Próbowałem za pomocą wstawek to zrobić, ale robi się gadatliwy i powtarzające się bardzo szybko:

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

.container { 
    @include container; 

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

} 

Czy istnieje prosty, czysty sposobem osiągnięcia tego z Sass?

Answer 1

Co szukasz jest dyrektywa @extend. @extend umożliwia udostępnianie zestawu właściwości CSS z jednego selektora na inny. Oznacza to, że musisz użyć tylko klasy container-featured.

Przykład

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

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

kompiluje do:

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

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

Answer 2

Rozwiązanie Colin Bacon jest poprawną odpowiedzią na pytanie. Ale jeśli chodzi o metodologię BEM, nie jest to eleganckie. Proponuję użyć innej składni BEM.

HTML:

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

SCSS:

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

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

Składnia:

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

Answer 3

Należy stosować wstawek w BEM nie Sass!

Mieszanki są po prostu tym - użycie kilku bloków i/lub elementów w tym samym węźle DOM.

pojedynczy węzeł DOM może oznaczać:

• kilka bloków b-menu b-head-menu
• bloku i element tego samego bloku b-menu b-menu__layout
• bloku i element innego bloku b-link b-menu__link
• elementy różnych bloków b-menu__item b-head-menu__item
• blok z modyfikatorem i anothe R blokują b-menu b-menu_layout_horiz b-head-menu
• kilka różnych bloków modyfikatory b-menu b-menu_layout_horiz b-head-toolbar b-head-toolbar_theme_black

Więcej na: http://bem.github.io/bem-method/html/all.en.html sekcja wstawek.

Możesz także użyć bloków i-bloków (bloków abstrakcyjnych), aby Twój kontener .container był .i-kontenerem, czytaj więcej: http://bem.github.io/bem-method/html/all.en.html, sekcja Konwencje nazewnictwa.

I z Sass można wdrożyć i-blok jako

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

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

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

Bez Sass, wstawek w BEM są w następujący sposób:

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

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

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