2

I'm relatively new to SCSS and try to improve my skills using a linter. I have this little example, where I want to display a submenu only if the parent menu-item is hovered. While this code is working, the linter gives me a "Class should be nested within its parent 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>

I have no idea how the :hover part could be nested into the .submenu part. Can you help?

rcvd
  • 51
  • 1
  • 6
  • 2
    My opinion is that linters are someone else's opinion and therefore neither the linter nor this comment matter ;) – Niet the Dark Absol Dec 30 '16 at 10:31
  • The code seems perfectly ok. Does you SASS code compiling when you are using it? – aavrug Dec 30 '16 at 10:32
  • The code is working as expected. I'm just wondering if the nesting could be improved. – rcvd Dec 30 '16 at 10:34
  • If the linter were smart, it should be telling you **not** to do so much nesting. Of course, if it were **really** smart it would be telling you not to use SCSS at all. By the way, could you please edit your question to put the actual question in the title? –  Dec 30 '16 at 11:04
  • Why would you recommend using no scss at all? Would you use pure CSS instead and why? Don't you miss mixins and variables? – rcvd Dec 30 '16 at 11:30
  • @torazaburo uh, what? – 1252748 Dec 30 '16 at 15:25

2 Answers2

2

I found the solution and it was so simple, I just had to nest the .submenu into the hover part :(

.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>
rcvd
  • 51
  • 1
  • 6
0

Your SASS code will compiled to the below CSS code which is working fine. Just make sure that your SASS code is properly compiling to 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>
aavrug
  • 1,849
  • 1
  • 12
  • 20
  • I know that it's compiling correct, but I thought that it might be possible to nest the hover part into the .submenu part somehow. But I don't know how to select the parents-parent element which would be needed for doing something like: – rcvd Dec 30 '16 at 10:37
  • I care less about the compiled css than about the sass file. Because the linter says that it should be nested, I'm trying to find out, how. – rcvd Dec 30 '16 at 10:58