css - 是否可以在 .less 组件中放置重复的样式

Question

是否可以将某些 css 样式放在组件中并在不同位置重复使用？在下面的示例中，我对 .navigation 重复相同的样式类(class):

.container-1 {
    .navigation {
        width: 100%;
    }
}

@media (max-width:991px) {
    .container-1 {
        .navigation {
            margin-top: 0px;             // <-- repeated
            background-color: #252525;   // <-- repeated
            width: 250px;                // <-- repeated
        }
    }
}

.container-2 {
    .navigation {
        margin-top: 0px;             // <-- repeated
        background-color: #252525;   // <-- repeated
        width: 250px;                // <-- repeated
    }
}

Answer 1

在较少的情况下，您可以使用 Mixins为了这:

.navigation-styles {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width:991px) {
    .container-1 {
        .navigation {
             .navigation-styles();
        }
    }
}

.container-2 {
    .navigation {
        .navigation-styles();
    }
}

请查看文档 here