使用LESS或SASS为CSS类名添加前缀

Question

我正在尝试在包含400多个站点的项目中使用Bootstrap，并使用以前的CSS类名（我无法控制）。我一直在遇到一些CSS名称冲突，我的解决方案是为Bootstrap添加一个前缀（例如.row到.tb-row）。

我熟悉使用LESS添加命名空间的方法，其中一个额外的类包含在类中。不幸的是，这似乎不会解决我的问题。

是否有通过LESS，SASS或任何其他编译器的方法，这使我可以轻松地向Bootstrap中的所有现有类添加tb-前缀？

Answer 1

您可以使用SASS

执行此操作

• $ namespace：“tb”;
• ⌘ + f（或类似）查找CSS文件中的所有类。你可能需要一个正则表达式（和一些试验+错误）才能找到它们。
• 将.#{$namespace}-添加到所有类中。

理想情况下，你会得到这样的东西：

$namespace: "tb";

.#{$namespace}-myClass {
  background:pink !important;
}

.#{$namespace}-carousel-module {
  width: 25%;
}

编译为

.tb-myClass {
  background:pink !important;
}

.tb-carousel-module {
  width: 25%;
}

“简单”可能是一个延伸，但“更容易”似乎适合。

我不确定这是否是最好的方法，诚实地说，我只是ripping off a gist that I saw的评论来自比我更聪明的人。虽然可能会派上用场！

Answer 2

您需要直接修改引导代码，这是一个如何在更少的情况下优雅地实现这一目标的示例：

.prefixname {
    &-row { 
        ...
    }  
} 

Answer 3

这是Bootstrap的分支，添加了类前缀。 https://github.com/sneas/bootstrap-sass-namespace。对我来说效果很好。

Answer 4

我在v3.1.0中为所有引导类（对于LESS）添加了前缀“tb-”。因此，在编译较少的文件后，您将获得类似“.tb-btn”的内容 您可以在https://github.com/TimothyGuo/tb--prefix-for-Bootstrap-v3.1.0--LESS-

分叉我的项目