在可选组件中重用LESS mixin类

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类型，以便将来更容易更改样式。例如，使用CSS将该元素从flex显示更改为其他任何内容。

基本上我在问我是否可以保持模块化结构并且产生更少的产品：

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

Answer 1

根据Harry的评论，我们可以使用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);
}