'How should the HTML structure in the example correspond to less

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?

htmlcssless


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 samargy_

Related Questions