是否可以在 .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

在 less 你可以使用 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

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

Is it possible to put duplicate style in a .less component

css

less