在Less中为Twitter Bootstrap添加前缀选择器

Question

我想开始学习Twitter Bootstrap，并将其合并到我的网站中（从表单元素开始），但是如果我按原样包含它，它会破坏整个网站。

我想要为所有选择器添加前缀，这样我就可以逐渐添加使用Bootstrap样式的内容，例如： `

`。

因为我只是开始学习，不太了解less的可能性。我已经手动完成了选择器前缀，但是我想知道是否有一种方法可以使用less来完成这个操作，这样我就可以通过修改Bootstrap来学习它，同时仍然将其隔离在必需的Bootstrap容器中。

现在，我必须在编译less文件后再添加前缀。

感谢任何建议！

- Yuji 'Tomita' Tomita

Answer 1

为避免periklis回答中提到的问题：创建自己的prefixed-bootstrap.less，将已编译的bootstrap.css重新编译为：

.bootstrap {
  @import (less) 'dist/css/bootstrap.css';
  @import (less) 'dist/css/bootstrap-theme.css'; /* optional */
}

那么就不需要使用 sed 命令了。当然，Lars Nielsen 的回答中提到的观察结果仍然有效。

- tuomassalo

---

啊，天才。这是一个如此简单的方法来做到它。 - Simon C

Answer 2

您可以编辑bootstrap.less文件，并将所有内容封装在类似于以下代码的东西中：

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

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

    [...]

}

更新:

因为 Bootstrap 文件使用 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;
}

为了解决这个问题，请使用以下内容编译Bootstrap：

$ 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;
}

- periklis

---

哈哈，我就知道它会很棒！谢谢Periklis。 - Yuji 'Tomita' Tomita

Answer 3

这并没有真正解决命名冲突的问题。它将一个特定的类作为选择器放在所有 bootstrap CSS 类的前面，所以要使用它们，你必须将你的 HTML 包装在一个带有那个特定名称的容器(比如 DIV)内部，然后 bootstrap 的 CSS 只会应用于那个 DIV 内部。但是这样做存在一些问题。

一个问题是 Bootstrap CSS 包含针对 BODY 和 HTML 的定义，如果在这些定义前面加了选择器，则不能应用这些样式。

另一个问题是，在您的自定义 CSS 中，您定义了一些与 Bootstrap 类（如“.dropdown”或“.table”）相同的样式。您可能定义了没有被 Bootstrap 定义的样式方面，您可能会覆盖 Bootstrap 样式或混乱它们。例如，如果 Bootstrap 定义了“.table”类上的填充，而您在自己的“.table”类上定义了边距，则它们将根据 CSS 优先级规则在页面呈现时结合起来。即使您在 Bootstrap 的“.table”类前面放置了特定的自定义选择器类，并在自己的“.table”类前面放置了不同的选择器类，它们仍然会结合和交互。

使用这样的选择器类并不是真正意义上的“命名空间”，也无法完全隔离 CSS。实现真正的隔离的最佳方法是在每个类名前加上一个唯一的前缀字符串。

- Lars Nielsen

---

但是添加前缀意味着引导javascript将不再起作用。 - Rhys

最好的实现真正隔离的方法是在每个类名前加上一个唯一的前缀字符串。 - danjah