我想开始学习 Twitter Bootstrap 并将其合并到我的网站（从表单元素开始），但如果我按原样包含它，它会破坏网站的其余部分。
我想为所有选择器添加前缀，以便我可以逐步添加引导样式的内容，如下所示：<div class="bootstrap"><!-- bootstrap styled stuff here --></div>
因为我才刚刚开始学习，我真的不知道less 有什么可能。我已经手动完成了选择器前缀，但我很好奇是否有办法使用less 执行此操作，以便我可以通过修改引导程序来学习它，同时仍将其隔离在所需的引导程序容器中。
现在，我必须在编译 less 文件后的第二步中添加前缀。
感谢您的任何建议！
【问题讨论】：
您可以编辑文件 bootstrap.less 并将所有内容封装在如下内容中：
.bootstrap {
// CSS Reset
@import "reset.less";
// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
[...]
}
更新：
由于引导文件使用 less & 运算符，例如：
// list-group.less (bootstrap 3.0.0)
.list-group-item {
[...]
a& {
[...]
}
}
上述代码的编译最终会出现语义错误且没有以 .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;
}
为了解决这个问题，请使用以下编译引导程序：
$ lessc bootstrap.less | sed -e 's/\(.\+\).bootstrap \(.\+\)/.bootstrap \1\2/g' > output.css
现在上面的行将被编译为：
.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;
}
【讨论】：
这并没有真正解决命名冲突的问题。它将一个特定的类作为选择器放在所有引导 CSS 类之前。因此，要使用它们，您必须将 HTML 包装在具有该特定名称的类的容器（如 DIV）中，然后引导 CSS 将仅适用于该 DIV。这有一些问题。
一个问题是 Bootstrap CSS 包含 BODY 和 HTML 的定义，如果您在它们前面放置一个选择器，它们将无法应用。
另一个问题是，在您的自定义 CSS 中，您将一些样式定义为 Bootstrap 类，例如“.dropdown”或“.table”。您可能会定义 Bootstrap 未定义的样式的各个方面，并且您可能会覆盖 Bootstrap 样式或将它们弄乱。例如，如果Bootstrap在“.table”类上定义了padding，而你在自己的“.table”类上定义了margin，那么它们在页面渲染时会按照CSS优先级规则进行组合。即使你在 Bootstrap 的 ".table" 类前面放了一个特定的自定义选择器类，在你自己的 ".table" 类前面放了一个不同的选择器类，它们仍然会组合和交互。
使用像这样的选择器类并不是真正意义上的“命名空间”，也不能完全隔离 CSS。实现真正隔离的最好方法是为每个类名加上一个唯一的前缀字符串。
【讨论】：
为了避免 periklis 的回答中提到的问题：创建自己的 prefixed-bootstrap.less 重新编译 已编译 bootstrap.css in ：
.bootstrap {
@import (less) 'dist/css/bootstrap.css';
@import (less) 'dist/css/bootstrap-theme.css'; /* optional */
}
那么就不需要sed 命令了。 Lars Nielsen 的回答中提到的观察结果当然仍然有效。
【讨论】：