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

Posted 2023-03-06

【中文标题】使用 LESS 或 SASS 为 CSS 类名添加前缀

【英文标题】：Add prefixes to CSS class names using LESS or SASS

【发布时间】：2013-06-22 13:05:06

【问题描述】：

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

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

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

【问题讨论】：

虽然我不能肯定地说，但我相信答案是“不”。此外，如果您查看引导程序代码，它们会使用很多属性选择器（不仅仅是类）来做事，其中一些确实如此，而另一些则不依赖于类本身。这增加了您尝试做的事情的复杂性。

【参考方案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%;

“简单”可能有点夸张，但“简单”似乎很合适。

我不确定这是否是最好的方法，老实说，我只是 ripping off a gist that I saw 来自比我聪明得多的人的 cmets。不过可能会派上用场！

【讨论】：

我同意，但这似乎是作者正在寻找的东西

【参考方案2】：

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

.prefixname 
    &-row  
        ...
      
 

【讨论】：

我一直在尝试使用这种方法，但由于某种原因不起作用:(

【参考方案3】：

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

【讨论】：

您是如何构建您在 github 存储库中的这些文件的。这正是我想做的。

我使用 git bash 将这些文件推送到我的存储库。您可以直接从 github 下载 zip 文件，也可以将存储库下载到本地环境。我正在开发一个需要一些前缀来引导 v3.1.0 的项目，但不幸的是，我找不到任何已经将前缀添加到这个新版本的人。因此，我决定自己做，并与社区分享。希望这对其他开发者有所帮助。

感谢 Tim，那么这将如何与 Bootstrap javascript 组件（如 modal、popover 等）一起使用，这些组件正在构建具有特定类的元素并查找具有特定类的元素

简短的回答是否定的。 JS 现在将是一个问题，因为它依赖于原始引导类名称。这是我以后需要做的事情，这需要我一些时间。完成这些 js 文件的前缀后，我将立即更新存储库