在 sass 中嵌套的问题 [重复]

Question

我知道你可以像这样添加父选择器：

.main-selector {
   .parent-selector & {

   }
}

我试图弄清楚是否有办法返回到 .main-selector，以便我可以向子元素添加悬停状态样式。所以，是这样的：

.main-selector {
   .child-selector {
      *styles*
      .main-selector:hover & {
         *hover styles*
      }
   }
}

Answer 1

正确的语法是：

.main-selector {
   .child-selector {
       *styles*
   }
   &:hover {
       *hover styles*
   }
}

这将为您的main-selector 产生悬停。你可以反过来做，像这样：

.main-selector {
    &:hover {
        *hover styles*
    }
    .child-selector {
        *styles*
    }   
  }