Question

我对SCSS相对较新，并尝试使用linter来提高我的技能。我有这个小例子，我只想在父菜单项悬停时显示一个子菜单。当这段代码正常工作时，linter给了我一个“Class应该嵌套在它的父Pseudo-class中”。

.menu-item { 
  .submenu {
    display: none;
  }

  &:hover .submenu {
    display: block;
  }
}

<ul>
  <li class='menu-item'>
    <a href=''>
      Menu 1
    </a>
    <ul class='submenu'>
      <li>Submenu 1.1</li>
      <li>Submenu 1.2</li>
    </ul>
  </li>
</ul>

我不知道：hover部分是如何嵌套到.submenu部分的。你能帮忙吗？

Answer 1

您的SASS代码将编译为以下CSS代码，该代码工作正常。只需确保您的SASS代码正确编译为CSS。

＆＃13;

.menu-item .submenu {
  display: none;
}

.menu-item:hover .submenu {
  display: block;
}

＆＃13;

<ul>
  <li class='menu-item'>
    <a href=''>
      Menu 1
    </a>
    <ul class='submenu'>
      <li>Submenu 1.1</li>
      <li>Submenu 1.2</li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

我找到了解决方案并且它非常简单，我只需要将.submenu嵌入到悬停部分：（

＆＃13;

.menu-item { 
  .submenu {
    display: none;
  }

  &:hover {
    .submenu {
      display: block;
    }
  }
}

＆＃13;

<ul>
  <li class='menu-item'>
    <a href=''>
      Menu 1
    </a>
    <ul class='submenu'>
      <li>Submenu 1.1</li>
      <li>Submenu 1.2</li>
    </ul>
  </li>
</ul>

＆＃13;

伪类嵌套/ SCSS Linter警告

2 个答案: