为 twitter bootstrap 的所有选择器添加前缀 [英] Prefixing all selectors for twitter bootstrap in less

问题描述

我想开始学习 Twitter Bootstrap 并将其合并到我的网站(从表单元素开始)，但如果我按原样包含它，它会破坏网站的其余部分.

I'd like to start learning Twitter Bootstrap and merging it into my site (starting with the form elements) but it breaks the rest of the site if I include it as is.

我想为所有选择器添加前缀，以便我可以逐渐添加引导程序样式的内容，如下所示:<div class="bootstrap"><!-- 这里是引导程序样式的内容--></div>

I'd like to prefix all of the selectors so that I can gradually add content that's bootstrap-styled like so: <div class="bootstrap"><!-- bootstrap styled stuff here --></div>

因为我才刚刚开始学习，我真的不知道 less 有什么可能.我已经手动完成了选择器前缀，但我很好奇是否有一种方法可以使用 less 来做到这一点，以便我可以通过修改引导程序来学习它，同时仍将它隔离在所需的引导程序容器中.

Because I'm only starting to learn, I don't really know what's possible with less. I have manually done the selector prefix but I'm curious if there would be a way to do this with less so that I can learn it by modifying bootstrap while still isolating it in a required bootstrap container.

现在，我必须在编译 less 文件后的第二步中添加前缀.

For now, I have to add prefix in a second step after compiling the less files.

感谢您的任何建议！

推荐答案

您可以编辑文件 bootstrap.less 并将所有内容封装成这样:

You can edit the file bootstrap.less and encapsulate everything in something like this:

.bootstrap {
    // CSS Reset
    @import "reset.less";

    // Core variables and mixins
    @import "variables.less"; // Modify this for custom colors, font-sizes, etc

    [...]

}

更新:

由于引导文件使用了 less &运算符，例如:

Since bootstrap files uses the less & operator, e.g:

// list-group.less (bootstrap 3.0.0)
.list-group-item {
    [...]
    a& {
        [...]
    }
}

上述代码的编译最终会产生语义错误且没有以.bootstrap 为前缀的规则:

The compilation of the above code will end up with rules that are semantically wrong and aren't prefixed with .bootstrap:

a.bootstrap .list-group-item {
  color: #555555;
}
a.bootstrap .list-group-item .list-group-item-heading {
  color: #333333;
}
a.bootstrap .list-group-item:hover,
a.bootstrap .list-group-item:focus {
  text-decoration: none;
  background-color: #ecf0f1;
}

为了解决这个问题，请使用以下编译引导程序:

In order to fix that use the following to compile bootstrap:

$ lessc bootstrap.less | sed -e 's/(.+).bootstrap (.+)/.bootstrap 12/g' > output.css

现在以上几行将被编译为:

Now the above lines will be compiled to:

.bootstrap a .list-group-item {
  color: #555555;
}
.bootstrap a .list-group-item .list-group-item-heading {
  color: #333333;
}
.bootstrap a .list-group-item:hover,
.bootstrap a .list-group-item:focus {
  text-decoration: none;
  background-color: #f5f5f5;
}

这篇关于为 twitter bootstrap 的所有选择器添加前缀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！