如何使用CSS预处理器将扩展样式应用于不同className的子选择器？

Question

我需要为Bootstrap classNames添加前缀。我并不是指使用.my-prefix .bs-class作为包装器，我的意思是实际上为BS classNames添加前缀，例如; .my-bs-class。

我已经探索过以编程方式进行此操作（使用Gulp进程）但是有些选择器对我来说安全转换有点复杂，更不用说处理mixin的复杂性。

所以我想知道如何使用LESS功能扩展BS，而使用简单的用例时，这可以正常工作，例如;

// BS
.btn {
  color:red;
}
// Prefixed BS
.my-btn {
  &:extend(.btn);
}

对嵌套选择器执行相同操作不起作用，因为我希望，我怀疑它不会。

考虑这个代码：http://codepen.io/davewallace/pen/MJrMVj你可以看到我想要发生的一个简单例子，但CSS输出是：

.btn-group .btn,
.ui-btn-group .btn {
  color: red;
}

而不是：

.btn-group .btn,
.ui-btn-group .ui-btn {
  color: red;
}

我想要实现的目标是什么，如果是的话，怎么样？

注意：我可以采用其他方法为BS加前缀，但是修改BS源所产生的技术债务是最不可取的，除非它是最小的。

编辑：我已经扩展了这个问题，包括任何CSS预处理器，以便不限制自己使用LESS，如果其他技术可以实现它。

Answer 1

Nofix为此，所以我的答案正式包含＆＃34;切换到支持前缀和组件隔离的框架＆＃34 ;;我们选择了UIKit。