Ist es möglich, die übergeordneten Eigenschaften in eine erweiterte Sass-Klasse einzuschließen?

Question

Ich möchte etwas wie das BEM-Modell in meiner Sass-Bibliothek implementieren. Aber ich bemühe mich, einen sauberen Weg zu finden.

Zum Beispiel würde Ich mag einen ‚Basis‘ Stil für ein gemeinsames Element zu erklären, und es dann mit nützlichen Variationen erweitern:

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

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

} 

Das Problem hierbei ist, dass die erzeugte .container-featured Klasse enthält nur die border property - Sass enthält den Rand und den Hintergrund nicht von seiner übergeordneten Klasse.

So Sie am Ende mit auf Klassen in Ihrem Markup zu verdoppeln um die gewünschten Ergebnisse zu erhalten:

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

Gibt es eine Möglichkeit, die Eigenschaften von einer übergeordneten Klasse nach unten in diese Modifikator Klasse zu ziehen, so dass Sie kann dasselbe visuelle Ergebnis erhalten, wenn Sie nur auf die Modifikatorklasse in Ihrem Markup verweisen?

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

Ich habe versucht mit Mixins, dies zu tun, aber die Dinge ausführlich und repetitiven sehr schnell:

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

.container { 
    @include container; 

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

} 

Gibt es eine einfache, saubere Möglichkeit, dies mit Sass zu erreichen?

Answer 1

Was Sie suchen ist die @extend Richtlinie. @extend können Sie eine Reihe von CSS-Eigenschaften von einem Selektor zum anderen teilen. Dies bedeutet, dass Sie nur die Klasse container-featured verwenden müssen.

Beispiel

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

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

kompiliert:

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

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

Answer 2

Colin Bacon Lösung ist die richtige Antwort auf die Frage. In Bezug auf die BEM-Methode ist dies jedoch nicht elegant. Ich schlage vor, dass Sie eine andere BEM-Syntax verwenden.

HTML:

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

SCSS:

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

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

Die Syntax:

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

Answer 3

Sie sollten mixin in BEM nicht in Sass verwenden!

Mixins sind nur das - Verwendung mehrerer Blöcke und/oder Elemente auf dem gleichen DOM-Knoten.

Ein einzelner DOM Knotens darstellen kann:

• mehrere Blöcke b-menu b-head-menu
• ein Block und ein Element des gleichen Blocks b-menu b-menu__layout
• ein Block und ein Element von einem anderen Block b-link b-menu__link
• Elemente verschiedener Blöcke b-menu__item b-head-menu__item
• ein Block mit einem Modifikator und einer anderen R Block b-menu b-menu_layout_horiz b-head-menu
• mehrere verschiedene Blöcke mit Modifikatoren b-menu b-menu_layout_horiz b-head-toolbar b-head-toolbar_theme_black

Weiteres entnehmen: http://bem.github.io/bem-method/html/all.en.html, Abschnitt Mixin.

Auch Sie können i-Blöcke (abstrakte Blöcke), so dass Ihre. Container wird .i-Container, lesen Sie mehr: http://bem.github.io/bem-method/html/all.en.html, Abschnitt Namenskonventionen.

Und mit Sass können Sie i-Block als

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

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

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

Ohne Sass implementieren, in der BEM mixin werden wie folgt hergestellt:

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

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

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