Sass with BEM, inherit selector

Question

I use Sass 3.4.1 and BEM, so my scss:

.photo-of-the-day{ &--title{ font-size: 16px; } } 

and I want it to hang over .photo-of-the-day every time, something happens with the header, which is quite common in css:

 .photo-of-the-day:hover .photo-of-the-day--title{ font-size:12px } 

thing uses BEM, this is the only way I found and it looks a little ugly.

 .photo-of-the-day{ &--title{ font-size: 16px; } &:hover{ background: red; /* this is ugly */ .photo-of-the-day--title{ text-decoration: underline; } } } 

so I was wondering if I can inherit the .photo-of-the-day selector and use it inside the hover to avoid copying the full selector again.

Ideally, it would be something like:

 .photo-of-the-day{ &--title{ font-size: 16px; } &:hover{ background: red; &&--title{ text-decoration: underline; } } } 

Or something close to returning the parent selector for BEM. Is it possible?

Answer 1

If you insist on investing everything, the best thing to do is:

 .photo-of-the-day { $root: &; &--title{ font-size: 16px; } &:hover{ #{$root}--title { text-decoration: underline; } } } 

Answer 2

You can use this syntax:

 .photo-of-the-day { &--title { font-size: 16px; } &:hover &--title { text-decoration: underline; } }