使用sass嵌套多个类

Question

我正在尝试使用sass嵌套多个类。我想用悬停来显示一个按钮。我的scss如下：

.item{
  border-bottom: 1px dotted #ccc;
  text-indent: 50px;
  height: 81%;
  padding: 2px;
  text-transform: capitalize;
  color: green;

   .Button{
      visibility: hidden;

        &:hover{
          visibility: visible;
        }
    }
}

这在css中显示为：

.item {
  border-bottom: 1px dotted #ccc;
  text-indent: 50px;
  height: 81%;
  padding: 2px;
  text-transform: capitalize;
  color: green; }

  .item .Button {
    visibility: hidden; }

    .item .Button:hover {
      visibility: visible; }

悬停属性在这里不起作用。

Answer 1

由于按钮已经隐藏，我会在项目上放置visible属性：hover。

SCSS应该如何看待：

.item {
  border-bottom: 1px dotted #ccc;
  text-indent: 50px;
  height: 81%;
  padding: 2px;
  text-transform: capitalize;
  color: green;

  .Button {
    visibility: hidden;
  }

  &:hover .Button {
    visibility: visible;
  }
}

.item {
  border-bottom: 1px dotted #ccc;
  text-indent: 50px;
  height: 81%;
  padding: 2px;
  text-transform: capitalize;
  color: green; 
}

.item .Button {
  visibility: hidden; 
}

.item:hover .Button {
  visibility: visible; 
}

<div class="item">
  Hover Item Class
  <button class="Button">button shows</button>
</div>

Answer 2

试试这个：

.item{
  border-bottom: 1px dotted #ccc;
  text-indent: 50px;
  height: 81%;
  padding: 2px;
  text-transform: capitalize;
  color: green;

  &:hover {
    .btn {
      visibility: visible;
    }
  }
  .btn{
    visibility: hidden;
  }
}