How to make class name inheritance in SCSS?

Question

css

Good evening! Faced such a problem.
I have this css file:

.menu { ... }
.menu .menu-list { ... }
.menu .menu-list .menu-list-item { ... }
.menu .menu-list .menu-list-item:hover { ... }

Trying to port it to SCSS

.menu {
  ...
  & &-list {
      ....
      & &-item {
             ....
            &:hover {
               ....
            }
       }
   }
}

But it doesn't work out the way you want it to.

.menu { ... }
.menu .menu-list { ... } 
.menu .menu-list .menu .menu-list-item { ... }

Do not know how to solve the problem?

Answer 1

you need to translate someone else's code into scss. Or are there any alternatives?

well , google ... there are a lot of services. not everyone is perfect, you will have to tweak the handles in places

Answer 2

.menu {
  ...
  .menu-list {
    ...
    .menu-list-item {
      ...
      &:hover {
        ...
      }
    }
  }
}

At the exit:

.menu{...}
.menu .menu-list{...}
.menu .menu-list .menu-list-item{...}
.menu .menu-list .menu-list-item:hover{...}

Answer 3

It turns out some kind of tin

.menu {
  color: red;
  .menu {
    &-list {
      color: green;
      .menu-list {
        &-item {
          color: blacl;
          &:hover {
            color: orange;
          }
        } 
      }
    } 
  }
}

Link