How to write this in SASS?

Asked by: chris11
Date:
Viewed: 306
Answers: 1
  • 0

Anyone knows how to write this css code in SASS?

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

Answers

Answer by: jenniryan

Answered on: 25 Jan 2023

  • 0

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.

 

Please log in to post an answer!