How can such less-constructs be optimized?

Question

Less

For example, there is a fairly heavily nested dom tree, and since quite often class names are repeated at different levels of nesting, there is not much opportunity to shorten selectors.
This is what the css for the generic selector should look like.

.ammenu-menu-wrapper.-desktop .ammenu-main-container .ammenu-items .ammenu-item.-main.-full .ammenu-submenu .ammenu-categories-container.ammenu-categories .ammenu-item.-child .ammenu-wrapper .ammenu-link.-level1 {
  content: '';
  width: 100%;
  height: 150px;
  background-size: 120px 120px !important;
  background-repeat: no-repeat !important;
  display: block;
  padding-top: 120px;
}

And besides, there are individual selectors that need to be highlighted, each with its own background.
For example,

.ammenu-menu-wrapper.-desktop .ammenu-main-container .ammenu-items .ammenu-item.-main.-full:nth-child(1) .ammenu-submenu .ammenu-categories-container.ammenu-categories .ammenu-item.-child:nth-child(1) .ammenu-wrapper .ammenu-link.-level1 {
  background-image: url(/pub/media/wysiwyg/pp-shop/pp-mega-menue/mm_jahresplaketten.png);
}

And there will be 25-30 such pieces, the first nth-child from 1 to 8, and the second - from 1 to a maximum of 7.
The only difference is background.
And all this should be in less.
How should all this look like?
Well, if for the general selector write as expected

spoiler

.ammenu-menu-wrapper {
  &.-desktop {
    .ammenu-main-container {
      .ammenu-items {
        .ammenu-item {
          &.-main {
            &.-full {
              .ammenu-submenu {
                .ammenu-categories-container {
                  &.ammenu-categories {
                    .ammenu-item {
                      &.-child {
                        .ammenu-wrapper {
                          .ammenu-link {
                            &.-level1 {
                              content: '';
                              width: 100%;
                              height: 150px;
                              background-size: 120px 120px !important;
                              background-repeat: no-repeat !important;
                              display: block;
                              padding-top: 120px;
                              overflow: visible;
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

What to do for specific? Well, do not write the same 30 times

spoiler

.ammenu-menu-wrapper {
  &.-desktop {
    .ammenu-main-container {
      .ammenu-items {
        .ammenu-item {
          &.-main {
            &.-full {
              &:nth-child(1) {
                .ammenu-submenu {
                  .ammenu-categories-container {
                    &.ammenu-categories {
                      .ammenu-item {
                        &.-child {
                          &:nth-child(1) {
                            .ammenu-wrapper {
                              .ammenu-link {
                                &.-level1 {
                                  background-image: url(/pub/media/wysiwyg/pp-shop/pp-mega-menue/mm_jahresplaketten.png);
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

Is there a way to succinctly describe all this?
Or to score and write everything in css syntax, but not to suffer?

Answer 1

Answer: limit yourself to a maximum of double nesting.
There is no point in making steam locomotives. And if there is - you have problems with the architecture.
Read about BEM. It is not necessary to follow it, but it is useful for understanding such issues.

Answer 2

1. You can't do such heavily nested constructions. It's not readable and it's impossible to maintain.
2. If several elements use the same styles - they must have a common class, no need to duplicate styles.
3. Use BEM. There, the maximum nesting is limited and this will force you to design code differently