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

Question

是否可以在组件中放入某些CSS样式并在不同位置重复使用？在下面的示例中，我为.navigation类重复相同的样式：

.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

更少，您可以为此使用@mixin和@include：

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

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

.container-2 {
    .navigation {
        @include navigation-styles;
    }
}

请查看文档here