the right way to do this with BEM+ SASS

Question

I am using the BEM method together with SASS and I have a big doubt.

I have this HTML

<section class="section1">
<p class="section1__tittle"></p>

</section>

<section class="section2">
<p class="section2__tittle"></p> ...

</section>

This CSS :

.section1{}
.section2{}
.section1__tittle, .section2__tittle{
 // as both headings share the same style, I apply it to each other
}

Now, how can I replicate applying styles to both titles, following BEM+SASS?

SASS

.section1{
 &__tittle{}
}
.section2{
 &__tittle{}
}

Because following this structure, I have to repeat it twice

The solution is to put a shared class or is there a way in SASS to make a .section1__tittle, .section2__tittle respecting the BEM methodology? thanks

Answer 1

One way is to select .section1 and .section2 at the same time and use the & to add the "__tittle" part.

.section1, .section2{
 /* styles */
 &__tittle{/* styles */}

 &__more-shared{/* styles */}

 &__blablabla{/* styles */}
}

That works because the ampersand & adds on to each of the parent selectors, so the code above gives you the exact same selectors as this:

.section1, .section2{/* styles */}

.section1__tittle, .section2__tittle{/* styles */}

.section1__more-shared, .section2__more-shared{/* styles */}

.section1__blablabla, .section2__blablabla{/* styles */}