SASS: Style only first level of multi level menu?

user_3699492 0
Viewed 2626

I'm trying to learn SASS and I would like to style the first level of my multi level menu using sass. Let's say this is the markup:

ul.menu
  li.menu-item
    ul.sub-menu
      li.menu-item

In CSS, I can target the first level with

ul.menu > menu-item

But I can't make ">" work on SASS. Is there another way to do this?

Edit:

Forgot to add that I'm using the & so Im trying it with this markup:

.menu{
  > &-item{
    color: red;
  }
}
sass css
1 Answers

To generate this css

.menu > .menu-item {
  color: red;
}

your sass should look like

.menu {
  & > &-item {
    color: red;
  }
}
user_43065720
Related