css - 伪类嵌套/SCSS Linter 警告

Question

我对 SCSS 比较陌生，并尝试使用 linter 提高我的技能。我有这个小例子，我只想在父菜单项悬停时显示子菜单。当这段代码工作时，linter 给了我一个“类应该嵌套在它的父类伪类中”。

.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

我找到了解决方案，它非常简单，我只需要将 .submenu 嵌套到悬停部分:(

.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>

Answer 2

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

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

.menu-item: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>