È possibile includere le proprietà principali in una classe Sass estesa?

Question

Mi piacerebbe implementare qualcosa come il modello BEM nella mia libreria Sass. Ma sto lottando per trovare un modo pulito per farlo.

Ad esempio, desidero dichiarare uno stile 'base' per un elemento comune, e quindi estendere con variazioni utili:

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

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

} 

Il problema è che il generato .container-featured classe contiene un'unica proprietà border: Sass non include il margine e lo sfondo dalla sua classe 'padre'.

così si finisce per dover raddoppiare sulle classi nel vostro markup per ottenere i risultati desiderati:

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

C'è qualche modo per tirare le proprietà di una classe genitore giù in quella classe modificatore, in modo da può ottenere lo stesso risultato visivo facendo semplicemente riferimento alla classe modificatore nel tuo markup?

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

Ho provato con mixins per fare questo, ma le cose si fanno verboso e ripetitivo molto rapidamente:

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

.container { 
    @include container; 

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

} 

C'è un modo semplice e pulita di raggiungere questo con Sass?

Answer 1

Quello che state cercando è la direttiva @extend. @extend consente di condividere un set di proprietà CSS da un selettore all'altro. Ciò significa che dovrai solo utilizzare la classe container-featured.

Esempio

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

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

compila a:

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

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

Answer 2

La soluzione Colin Bacon è la risposta corretta alla domanda. Ma per quanto riguarda la metodologia BEM, questo non è elegante. Ti suggerisco di usare un'altra sintassi BEM.

HTML:

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

SCSS:

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

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

La sintassi:

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

Answer 3

Si dovrebbe usare mixin in BEM non in Sass!

I mixaggi sono proprio questo: l'utilizzo di più blocchi e/o elementi sullo stesso nodo DOM.

Un singolo nodo DOM può rappresentare:

• diversi isolati b-menu b-head-menu
• un blocco e un elemento dello stesso blocco b-menu b-menu__layout
• un blocco e un elemento di un altro blocco b-link b-menu__link
• elementi di diversi blocchi b-menu__item b-head-menu__item
• un blocco con un modificatore e un altro r bloccare b-menu b-menu_layout_horiz b-head-menu
• diversi isolati differenti con modificatori b-menu b-menu_layout_horiz b-head-toolbar b-head-toolbar_theme_black

Maggiori informazioni si trovano: http://bem.github.io/bem-method/html/all.en.html, sezione Mixin.

Inoltre, è possibile utilizzare i-blocks (blocchi astratti), in modo che il contenitore .i sia .i-container, ulteriori informazioni: http://bem.github.io/bem-method/html/all.en.html, sezione Convenzioni di denominazione.

E con Sass è possibile implementare i-blocco come

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

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

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

Senza Sass, mixin nel BEM sono effettuati come segue:

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

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

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