Is it possible to include parent properties in an extended Sass class?

Question

I would like to implement something like a BEM model in my Sass library. But I'm struggling to find a clean way to do this.

For example, I would like to declare a “base” style for a generic element, and then expand it with useful options:

.container { margin: 10%; background: #eee; &-featured { border: 2px solid #999; } } 

The problem is that the generated .container-featured class contains only the border property - Sass does not include the marker and background from its parent class.

So, you need to double the classes in your markup to get the desired results:

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

Is there a way to pull properties from the parent class into the modifier class so that you can get the same visual result by simply referring to the modifier class in your markup?

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

I tried using mixins to do this, but things get verbose and repeating very quickly:

 @mixins container { margin: 10%; background: #eee; } .container { @include container; &-featured { @include container; border: 2px solid #999; } } 

Is there a simple, clean way to achieve this with Sass?

Answer 1

What you are looking for is the @ext directive. @extend allows you to share a set of CSS properties from one selector to another. This means that you will only need to use the container-featured class.

Example

 .container { margin: 10%; background: #eee; &-featured { @extend .container; border: 2px solid #999; } } 

compiles:

 .container, .container-featured { margin: 10%; background: #eee; } .container-featured { border: 2px solid #999; } 

Answer 2

Colin Bacon's solution is the right answer to the question. But with regard to the BEM methodology, this is not elegant. I suggest you use a different BEM syntax.

HTML:

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

SCSS:

 .Container { margin: 10%; background: #eee; &.featured { border: 2px solid #999; } } 

Syntax:

• Componententame
• ComponentName.modifierName
• ComponentName-descendantName
• ComponentName-descendantName.modifierName
• ComponentName.isStateOfComponent

Answer 3

You must use mixin in BEM not in Sass!

Mixins are simply the use of multiple blocks and / or elements in a single DOM node.

One DOM node can represent:

• multiple b-menu b-head-menu blocks b-menu b-head-menu
• block and element of the same block b-menu b-menu__layout
• block and element of another block b-link b-menu__link
• elements of different blocks b-menu__item b-head-menu__item
• a block with a modifier and another block b-menu b-menu_layout_horiz b-head-menu
• several different blocks with modifiers b-menu b-menu_layout_horiz b-head-toolbar b-head-toolbar_theme_black

More details: http://bem.imtqy.com/bem-method/html/all.en.html , Mixin section.

You can also use i-blocks (abstract blocks), so your .container will be .i-container, read more: http://bem.imtqy.com/bem-method/html/all.en.html , section of the Agreement on names.

And with Sass, you can implement i-block as

 <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 in BEM is done as follows:

 <div class="i-container container-featured"> ... </div> .i-container { // abstract block styles margin: 10%; background: #eee; } .container-featured { border: 2px solid #999; }