使用LESS或SASS向CSS类名称添加前缀 [英] Add prefixes to CSS class names using LESS or SASS

问题描述

我正在尝试在一个包含400多个站点并使用以前的CSS类名称(我无法控制)的项目上使用Bootstrap.我已经遇到了一些CSS名称冲突的问题，对我来说，解决方案是在Bootstrap中添加前缀(例如，.row到.tb-row).

I am trying to use Bootstrap on a project that encompasses 400+ sites and uses the previous CSS class names (which I have no control over). I've been running into some CSS name clashing and the solution for me is to add a prefix to Bootstrap (.row to .tb-row for example).

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

I am familiar with the method of adding a namespace using LESS, where an additional class is wrapped around the classes. Unfortunately, this doesn't look like it will solve my issues.

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

Is there a method via LESS, SASS, or any other compiler that makes it easy for me to add a tb- prefix to all existing classes in Bootstrap?

推荐答案

您可能可以使用SASS进行此操作

You could probably do this with SASS

• $ namespace:"tb";
• ⌘ + f(或类似名称)以查找CSS文件中的所有类.您可能需要一个正则表达式(以及一些试验性的错误)才能找到它们.
• 将.#{$namespace}-添加到所有类中.

• $namespace: "tb";
• ⌘ + f (or similar) to find all the classes in your CSS file. You're going to probably need a regex (and some trial+error) to find them all.
• add .#{$namespace}- to all the classes.

理想情况下，您会得到像这样的东西:

Ideally, you'd get get something like this:

$namespace: "tb";

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

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

编译为

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

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

轻松"可能有点麻烦，但轻松"似乎很合适.

"Easy" might be a stretch but "easier" seems fitting.

我不确定这是否是最好的方法，说实话，我只是摘录我看到的要旨来自比我聪明得多的人们的评论.也许可以为您派上用场！

I'm not sure if this is the best approach, in honesty, I'm just ripping off a gist that I saw with comments from people a lot smarter than I am. May come in handy for you though!

这篇关于使用LESS或SASS向CSS类名称添加前缀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！