CODEWITHSUNDEEP
csssass
MrLearner
MrLearner

Reputation: 141

SASS: Style only first level of multi level menu?

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;
  }
}

Upvotes: 6

Views: 3540

Answers (1)

3rdthemagical
3rdthemagical

Reputation: 5350

To generate this css

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

your sass should look like

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

Upvotes: 8

Related Questions