伪类嵌套/SCSS Linter 警告答案

【问题标题】：Pseudo-class nesting / SCSS Linter Warning伪类嵌套/SCSS Linter 警告
【发布时间】：2016-12-30 10:27:25
【问题描述】：

我对 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 部分中。你能帮忙吗？

【问题讨论】：

我的观点是 linter 是别人的意见，因此 linter 和这个评论都不重要 ;)
代码看起来完全没问题。你在使用的时候会编译SASS代码吗？
代码按预期工作。我只是想知道嵌套是否可以改进。
如果 linter 很聪明，它应该告诉你不要做这么多的嵌套。当然，如果它真的很聪明，它会告诉你根本不要使用 SCSS。顺便说一句，您能否编辑您的问题以将实际问题放在标题中？
你为什么建议完全不使用 scss？你会改用纯 CSS 吗？为什么？你不会错过 mixins 和变量吗？

标签： css sass scss-lint

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

我知道它编译正确，但我认为有可能以某种方式将悬停部分嵌套到 .submenu 部分中。但我不知道如何选择执行以下操作所需的 parents-parent 元素：
我不太关心编译后的 css，而是关心 sass 文件。因为 linter 说它应该嵌套，所以我试图找出如何嵌套。