How to write this in SASS?

Question

Anyone knows how to write this css code in SASS?

nav ul li:hover > ul {
    display:inherit;
}
in progress 0
chris11 2023-01-25T14:52:48+00:00 1 Answer 11 views
0

Answer ( 1 )

  1. jenniryan
    0
    2023-01-25T15:10:47+00:00
    Reply

    In SASS, you can write this CSS code as follows:

    nav {
  ul {
    li {
      &:hover {
              > ul {
             display: inherit;
                   }
              }
       }
    }
}

    The “&” symbol refers to the parent selector, and “>” is the direct descendant combinator. The :hover pseudo-class is used to apply styles to an element when the user hovers over it with the mouse.

    You can also write this code using the @extend directive:

    %show-submenu {
    display: inherit;
}

nav {
    ul {
       li {
          &:hover {
                  > ul {
                    @extend %show-submenu;
                    }
              }
          }
     }
}

    This code creates a %show-submenu placeholder class that is extended by the ul element when the parent li element is hovered over. The “%” symbol indicates that the %show-submenu class is a placeholder and will not generate any CSS on its own. It is used as a way to share styles across different rules in a stylesheet.

Leave an answer