Sass z BEM, dziedziczyć selektor

Question

Używam Sass 3.4.1 oraz BEM więc moja SCSS jest:

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

i chcę za każdym razem unoszą się nad .photo-of-the-day coś się stało z tytułem, to dość powszechne, więc zwykle w CSS:

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

rzeczą jest użycie BEM jest to jedyny sposób znalazłem i wygląda trochę brzydki

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

więc zastanawiałem się, czy mogę dziedziczyć selektor .photo-of-the-day i użyć go wewnątrz hover, aby uniknąć ponownego kopiowania pełnego selektora.

Idealnie byłoby coś jak:

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

lub coś blisko powrotu do selektora dominującej za BEM. Czy to możliwe?

Answer 1

Jeśli nalegać na zagnieżdżanie wszystko, to najlepsze co możesz zrobić to w ten sposób:

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

Answer 2

Można użyć tej składni:

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