Sass mit BEM, erben Wähler

Question

Ich verwende Sass 3.4.1 und BEM so meine SCSS ist:

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

und ich möchte jedes Mal schweben über .photo-of-the-day etwas mit dem Titel passieren, das ist ziemlich häufig so in der Regel in CSS:

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

das Ding BEM verwendet dies ist die einzige Art, wie ich gefunden und sieht irgendwie hässlich

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

Also frage ich mich, ob ich .photo-of-the-day Selektor erben kann und es innerhalb des Hover verwenden kann, um zu vermeiden, den vollen Selektor wieder zu kopieren.

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

Oder etwas in der Nähe Comeback der Mutter Wähler für BEM:

Im Idealfall so etwas wie wäre. Ist es möglich?

Answer 1

Wenn Sie darauf bestehen, alles nisten, das Beste, was Sie tun können, ist dies:

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

Answer 2

Sie diese Syntax verwenden:

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