html - 嵌套悬停不起作用

Question

之前

#item_1, #item_2, #item_3 {
    display: inline-block;
    width: 57px;
    padding-top: 11px;
    padding-bottom: 11px;
    text-decoration: none;
}

#item_1:hover, #item_2:hover, #item_3:hover {
  color: #fff;
}

之后

#item_1, #item_2, #item_3 {
    display: inline-block;
    width: 57px;
    padding-top: 11px;
    padding-bottom: 11px;
    text-decoration: none;
    &:hover {
        color: #fff;
    } 
}

保持 html 不变，之前的版本有效，之后的版本无效。我正在使用 Rails 4 构建 Rails 应用程序。

Answer 1

是一个 ruby​​ 样式库

请参阅文档 sass install

例子

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}
is compiled to:

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }