在可选组件中重用 LESS 混合类

Question

用例：在“插件”中拆分功能的应用程序。像 WordPress（观察者模式）之类的东西。每个插件还可以有自己的 javascript、CSS。

有一个“核心”插件，大多数其他插件都依赖它。它带有一个包含 LESS mixins 的文件。示例：

.flex-container(){
  display: -ms-flexbox;     // ie 10
  display: -webkit-box;     // safari 6-
  display: -webkit-flexbox; // safari 6+
  display: -webkit-flex;   
  display: flex;           
}

如果我在插件中使用它，我会得到很多重复的代码：

.traffic-box{
  .flex-container(); // all the properties above get added here in the compiled CSS 
}

.comment-box{
  .flex-container(); // again...
}

有什么方法可以更好地编译 CSS，但不必在插件 HTML 中应用类？我想避免在 HTML 中使用 mixin-type 类，以便将来更容易更改样式。例如，仅使用 CSS 将该元素从 flex 显示更改为其他任何内容。

基本上我是在问我是否可以保留模块化结构并产生lesscss：

.flex-container, .traffic-box, .comment-box{
  display: ...
}

Answer 1

根据 Harry 的 cmets，我们可以使用 extend 来执行此操作，唯一需要注意的是您必须将 flex-container 从 mixin 更改为类。

示例

// This now becomes a class
.flex-container{
  display: -ms-flexbox;     // ie 10
  display: -webkit-box;     // safari 6-
  display: -webkit-flexbox; // safari 6+
  display: -webkit-flex;   
  display: flex;           
}

.traffic-box{
  &:extend(.flex-container);
}

.comment-box{
  &:extend(.flex-container);
}