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

Question

我需要在 Bootstrap 类名前加上前缀。我不是说使用 .my-prefix .bs-class 作为包装器，我的意思是实际上给 BS classNames 添加前缀，例如； .my-bs-class.

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

所以我想知道如何使用 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

没有修复这个问题，所以我的回答正式由"switch to a framework that supports prefixing and component isolation"组成；我们选择了 UIKit。

How to apply extended styles to child selectors of a different className with CSS pre-processor?