如何简化这段多层嵌套的Less样式代码？

Absolutely! That deeply nested Less code is a perfect example of repetitive styling we can clean up easily. Let’s go through a few practical approaches tailored to your scenario:

1. Group Selectors for Direct Targeting #

Since almost all nested elements share the same height: 100% rule, we can group all those selectors together under the parent .panel-body instead of nesting each one. This cuts down on redundant indentation and repetition:

.panel-body {
  height: ~"calc(100vh - 295px)";
  padding: 15px 0 !important;
  
  // Target all nested elements that need full height
  & > .row,
  & > .row > div,
  & > .row > div > .tab-content,
  & > .row > div > .tab-content > .tab-pane,
  & > .row > div > .tab-content > .tab-pane > .row,
  & > .row > div > .tab-content > .tab-pane > .row > .class-1,
  & > .row > div > .tab-content > .tab-pane > .row > .class-1 > .class-2 {
    height: 100%;
  }
}

Pros: No unexpected side effects—you’re explicitly targeting only the elements you need. Easy to read and maintain.
Cons: You have to list each selector manually, which is a minor task but less dynamic if your HTML structure changes often.

2. Use a Reusable Mixin #

If you find yourself repeating height: 100% across other parts of your codebase, a Less mixin is a great way to standardize this rule. It keeps your code DRY (Don’t Repeat Yourself):

// Define a reusable mixin once
.full-height() {
  height: 100%;
}

.panel-body {
  height: ~"calc(100vh - 295px)";
  padding: 15px 0 !important;
  
  & > .row {
    .full-height();
    & > div {
      .full-height();
      & > .tab-content {
        .full-height();
        & > .tab-pane {
          .full-height();
          & > .row {
            .full-height();
            & > .class-1 {
              .full-height();
              & > .class-2 {
                .full-height();
              }
            }
          }
        }
      }
    }
  }
}

Pros: Easy to update globally (just change the mixin if you need to adjust the rule later). Makes nested code more readable at a glance.
Cons: Still retains some nesting, but the repetition of height: 100% is replaced with a clean mixin call.

3. Caution: Recursive Universal Selectors (Use Sparingly!) #

If your HTML structure under .panel-body is strictly limited to the elements you’ve listed (no extra direct children that shouldn’t get height: 100%), you can use recursive universal selectors to target all nested direct children. This is the shortest syntax but carries risk:

.panel-body {
  height: ~"calc(100vh - 295px)";
  padding: 15px 0 !important;
  
  // Target all direct children, and their direct children, etc.
  & > * {
    height: 100%;
    & > * {
      height: 100%;
      & > * {
        height: 100%;
        & > * {
          height: 100%;
          & > * {
            height: 100%;
            & > * {
              height: 100%;
            }
          }
        }
      }
    }
  }
}

Pros: Extremely concise.
Cons: Will apply height: 100% to any direct child element at those nesting levels, which can break styling if you add new elements later. Only use this if your HTML structure is fixed and unchanging.

Bonus: CSS inherit Value #

Another small tweak: instead of writing height: 100%, you can use height: inherit to pull the parent’s computed height value. The end result is identical here, but it’s a nice alternative if you prefer semantic CSS:

.panel-body {
  height: ~"calc(100vh - 295px)";
  padding: 15px 0 !important;
  
  & > .row {
    height: inherit;
    & > div {
      height: inherit;
      // Repeat for nested elements
    }
  }
}

Pick the approach that best fits your project’s needs—grouped selectors are the safest bet for most cases, while mixins shine if you need reuse.

内容的提问来源于stack exchange，提问作者Nienormalny_