萨斯与BEM，继承选择

Question

我使用萨斯3.4.1和BEM所以我SCSS是：

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

，我想在.photo-of-the-day的东西，每次悬停与标题发生，这是非常常见所以通常在CSS：

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

的东西是用BEM这是我发现的唯一途径，看起来有点丑

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

所以我想知道如果我可以继承.photo-of-the-day选择器并在悬停中使用它，以避免再次复制完整的选择器。

理想的情况下会是这样的：

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

或者一些接近复出，为BEM家长选择。可能吗？

Answer 1

如果你坚持嵌套的一切，你能做的最好的是这样的：

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

Answer 2

你可以使用这个语法：

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