How should the HTML structure in the example correspond to less

Question

This is my HTML code.

<div class="app-menu-layout">
  <main class="app-menu-layout-main">
    <div class="app-menu-layout-main-container">Hello World</div>
  </main>
</div>

Here's what I did, but he was wrong

.app-menu-layout {
  &>&-main {
    &>&-container{
      color:red
    }
  }
}


// Compiled CSS
.app-menu-layout>.app-menu-layout-main>.app-menu-layout>.app-menu-layout-main-container {
  color: red;
}

expected results:

.app-menu-layout>.app-menu-layout-main>.app-menu-layout-main-container {
  color: red;
}

How should I write the nested structure of less?

I don't understand why you need to select all the parents, just select `.app-menu-layout-main-container` — Zach Jensz, Mar 22 '22 at 02:17

score 0 · Answer 1 · answered Mar 22 '22 at 02:19

0

Just write the correct class names. e.g

.app-menu-layout {
   &.app-menu-layout-main {
      &.app-menu-layout-main-container{
        color:red;
       }
    }
 }

Link to nested LESS.

answered Mar 22 '22 at 02:19

samargy_

33
1
6

How should the HTML structure in the example correspond to less

1 Answers1