例子中的HTML结构应该如何对应less

Question

这是我的 HTML 代码。

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

这是我所做的，但他的

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

预期结果是错误的：

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

我应该如何编写less的嵌套结构？

Answer 1

只需写出正确的类名即可。例如

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

链接到嵌套的LESS。