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

Question

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

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

是否有通过LESS,SASS或任何其他编译器的方法,这使我可以轻松地为引导程序中的所有现有类添加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%;
}

"简单"可能是一个延伸,但"更容易"似乎适合.

我不确定这是不是最好的方法,诚实地说,我只是扯下了一句话,我看到的人的评论比我聪明得多.虽然可能会派上用场!

Answer 2

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

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