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

Question

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

我熟悉使用 LESS 添加命名空间的方法，其中围绕类包装了一个附加类。不幸的是，这看起来并不能解决我的问题。

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

Answer 1

你可以用 SASS 做到这一点

• $命名空间：“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

您将需要直接修改引导代码，这是如何在 less 中优雅地实现的示例：

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

Answer 3

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